jQuery Wookmark 瀑布流布局

浏览数：55 / 时间：2015年06月09日

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

版本：: 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 });