瀑流式布局jquery Masonry插件

瀑流式布局jquery Masonry插件
 点击预览  点击下载

瀑流式布局越来越普遍,实现瀑流式布局的插件也越来越多。例如淘宝的KISSY。不过对我我这种半吊子来说,要熟练的使用KISSY没那么快。最近在一个项目中推荐了一个Masonry插件,使用起来很简单,插件大小只有6k。简单介绍下。一般的瀑流式布局,如果有4列的话,很多人会采用一下这种写法:

  1. <div id="main"> 
  2.     <div class="Column"> 
  3.         <div class="list"></div> 
  4.         <div class="list"></div> 
  5.     </div> 
  6.      <div class="Column"> 
  7.         <div class="list"></div> 
  8.         <div class="list"></div> 
  9.     </div> 
  10.     <div class="Column"> 
  11.     <div class="list"></div> 
  12.         <div class="list"></div> 
  13.     </div> 
  14.     <div class="Column"> 
  15.         <div class="list"></div> 
  16.         <div class="list"></div> 
  17.     </div> 
  18. </div> 

也就是4列等宽在浮动。因为瀑流式一般每个块的高度都是不固定的,

所以没有办法通过每个块的浮动来实现。
使用插件Masonry就能够解决这个问题。同样的样式用Masonry插件就可以这样写:
  1. <div id="main"> 
  2.     <div class="list"></div> 
  3.     <div class="list"></div> 
  4.     <div class="list"></div> 
  5.     <div class="list"></div> 
  6.     <div class="list"></div> 
  7.     <div class="list"></div> 
  8.     <div class="list"></div> 
  9.     <div class="list"></div> 
  10. </div> 
简单了许多,插件的原理是通过绝对定位实现的,也就解决了高度不一产生的浮动问题。
这样的写法。后台数据的输出也会更加容易一些。
Masonry的使用方法如下:
引入文件:
 
在js中调用插件:
  1. <script type="text/javascript"
  2.   $(function(){ 
  3.     $(´#main´).masonry({ 
  4.       // options 设置选项 
  5.       itemSelector : ´.list´,//class 选择器 
  6.       columnWidth : 240 ,//一列的宽度 Integer 
  7.           isAnimated:true,//使用jquery的布局变化  Boolean 
  8.           animationOptions:{ 
  9.             //jquery animate属性 渐变效果  Object { queue: false, duration: 500 } 
  10.           }, 
  11.           gutterWidth:0,//列的间隙 Integer 
  12.           isFitWidth:true,// 适应宽度   Boolean 
  13.           isResizableL:true,// 是否可调整大小 Boolean 
  14.           isRTL:false,//使用从右到左的布局 Boolean 
  15.   }); 
  16. }); 
  17. </script> 
如果有图片的话,调用如下:
  1. <script> 
  2. var $main= $(´#main´); 
  3. $main.imagesLoaded(function(){ 
  4.   $main.masonry({ 
  5.     itemSelector : ´.list´, 
  6.     columnWidth : 240 
  7.   }); 
  8. }); 
  9. </script> 

转载请注明:代码家园 » 瀑流式布局jquery Masonry插件

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