jQuery Wookmark 瀑布流布局

载入 JavaScript 文件

<script src="jquery.js"></script>
<script src="jquery.wookmark.js"></script>

CSS 样式

/*
 * 父容器需要设置相对定位
 * 项目需要设置隐藏
 */
#list{position:relative;}
#list li{display:none;}

DOM 结构

<!--
本例中，$("#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>

调用 Wookmark

$('#list li').wookmark();

// 自定义参数调用
$('#list li').wookmark({
  container: $('#list'),
  offset: 10,
  itemWidth: 200
});

手动触发布局事件

// 根据需要，可以进行手动触发重新布局
$('#list').trigger('refreshWookmark');