码迷,mamicode.com
首页 > Web开发 > 详细

jQuery Wookmark 瀑布流布局

时间:2014-11-07 12:38:06      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   color   ar   os   使用   java   

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

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

手动触发布局事件

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

本文出自于此

jQuery Wookmark 瀑布流布局

标签:style   blog   http   io   color   ar   os   使用   java   

原文地址:http://www.cnblogs.com/CHEUNGKAMING/p/4080849.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!