jQuery Wookmark Load 瀑布流布局实例演示

载入 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');