瀑布流布局非常适合大量图片的展示，一改过去裁剪图片尺寸统一的排版，每张图片都能完全展示，并错落有致，让人眼前一亮。

版本：

jQuery v1.4.3+

jQuery Wookmark v1.4.8

注意事项：

项目中的 img 元素的 width 和 height 属性需要写，否则定位会不准确。（可以用 JavaScript 实时获取图片的宽高，但图片数量过多时，这将是一件不靠谱的事情，如果你执意要这么做，可以参考这个 ）

载入 JavaScript 文件

 <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 
         5 
       
          6     
        
text
  7     
        
text
  8     ...  9     
        
text
 10 
       

调用 Wookmark

1 $('#list li').wookmark(); 2  3 // 自定义参数调用 4 $('#list li').wookmark({ 5     container: $('#list'), 6     offset: 10, 7     itemWidth: 200 8 });

手动触发布局事件

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