瀑布流布局非常适合大量图片的展示，一改过去裁剪图片尺寸统一的排版，每张图片都能完全展示，并错落有致，让人眼前一亮。
版本：
jQuery v1.4.3+
jQuery Wookmark v1.4.8
注意事项：
项目中的 img 元素的 width 和 height 属性需要写，否则定位会不准确。（可以用 JavaScript 实时获取图片的宽高，但图片数量过多时，这将是一件不靠谱的事情，如果你执意要这么做，可以参考这个
Demo）
载入 JavaScript 文件
1 <script src="jquery.js"></script> 2 <script src="jquery.wookmark.js"></script>
CSS 样式
1 /*
2 * 父容器需要设置相对定位
3 * 项目需要设置隐藏
4 */
5 #list{
position:
relative;}
6 #list li{
display:
none;}
DOM 结构
1 <!--
2 本例中，$("#list") 就是父容器，内部的 li 就是要进行瀑布流布局的项目。当然也可以使用 div 或其他标签的来写。
3 项目中的 img 元素的 width 和 height 属性需要写，否则定位会不准确。
4 -->
5 <ul id="list">
6 <li><img src="pic_1.jpg" width="200" height="283"><p>text</p></li>
7 <li><img src="pic_2.jpg" width="200" height="300"><p>text</p></li>
8 ...
9 <li><img src="pic_n.jpg" width="200" height="252"><p>text</p></li>
10 </ul>
调用 Wookmark
1 $('#list li'
).wookmark();
2
3 // 自定义参数调用
4 $('#list li'
).wookmark({
5 container: $('#list'
),
6 offset: 10
,
7 itemWidth: 200
8 });
手动触发布局事件
1 // 根据需要，可以进行手动触发重新布局 2 $('#list').trigger('refreshWookmark');
本文出自于此
转载于:https://www.cnblogs.com/CHEUNGKAMING/p/4080849.html
相关资源：JAVA上百实例源码以及开源项目
