瀑布流布局非常适合大量图片的展示，一改过去裁剪图片尺寸统一的排版，每张图片都能完全展示，并错落有致，让人眼前一亮。
项目中的 img 元素的 width 和 height 属性需要写，否则定位会不准确。（可以用 JavaScript 实时获取图片的宽高，但图片数量过多时，这将是一件不靠谱的事情。)
实例预览 Example 基本示例
实例预览 AMD 加载器
实例预览 Endless scroll 无限滚动
实例预览 Flexible width 弹性布局
实例预览 Lightbox 支持灯窗插件
实例预览 Load it all 动态读取图片尺寸
实例预览 Placeholders 底部占位符
实例预览 PHP server PHP 加载数据
实例预览 Remote API 远程 API 加载数据
实例预览 Filtering Or 筛选功能
实例预览 Filtering And 筛选功能
实例预览 Filtering Only 筛选功能
实例预览 Filtering Fade 筛选功能
实例预览 sorting排序基本示例
实例预览 stamping基本示例
<script src="jquery.js"></script>
<script src="jquery.wookmark.js"></script>/*
* 父容器需要设置相对定位
* 项目需要设置隐藏
*/
#list{position:relative;}
#list li{display:none;}
<!--
本例中，$("#list") 就是父容器，内部的 li 就是要进行瀑布流布局的项目。当然也可以使用 div 或其他标签的来写。
项目中的 img 元素的 width 和 height 属性需要写，否则定位会不准确。
-->
<ul id="list">
<li><img src="pic_1.jpg" width="200" height="283"><p>text</p></li>
<li><img src="pic_2.jpg" width="200" height="300"><p>text</p></li>
...
<li><img src="pic_n.jpg" width="200" height="252"><p>text</p></li>
</ul>
$('#list li').wookmark();
// 自定义参数调用
$('#list li').wookmark({
container: $('#list'),
offset: 10,
itemWidth: 200
});
// 根据需要，可以进行手动触发重新布局
$('#list').trigger('refreshWookmark');