jQuery Wookmark 瀑布流布局插件

jQuery Wookmark 瀑布流布局插件
 点击预览  点击下载

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

注意事项:

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

【options 参数说明】

名称 默认值 说明
container $("body") 父容器
offset 2 项目间距(px)。横向纵向相同,不支持单独设置。
autoResize false 自动重排。当浏览器窗口大小大小变化时进行重新排列。
itemWidth $(this[0]).outerWidth() 项目宽度(px)。默认是取第一个项目的宽度。
resizeDelay 50 重排间隔时间(ms)。检测自动重排的间隔时间。

【使用方法】

载入 JavaScript 文件

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

CSS 样式

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

DOM 结构

  1. <!--  
  2. 本例中,$("#list") 就是父容器,内部的 li 就是要进行瀑布流布局的项目。当然也可以使用 p 或其他标签的来写。  
  3. 项目中的 img 元素的 width 和 height 属性需要写,否则定位会不准确。  
  4. -->  
  5. <ul id="list">  
  6.     <li><img src="pic_1.img" width="200" height="283"><p>text</p></li>  
  7.     <li><img src="pic_2.img" width="200" height="300"><p>text</p></li>  
  8.     ...  
  9.     <li><img src="pic_n.img" width="200" height="252"><p>text</p></li>  
  10. </ul>  

调用 Wookmark

  1. $("#list li").wookmark({  
  2.     container:$("#list"),  
  3.     offset:10,  
  4.     itemWidth:200  
  5. }); 

转载请注明:代码家园 » jQuery Wookmark 瀑布流布局插件

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)