jQuery Wookmark 瀑布流布局

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

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

 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> 

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

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