jQuery动态网格瀑布流插件Masonry

Masonry是一款非常强大的jQuery动态网格布局插件，可以帮助开发人员快速开发瀑布流界面效果。和CSS中float的效果不太一样的地方在于，float先水平排列，然后再垂直排列，使用Masonry则先垂直再横向排列元素，将下一个元素放置到上一个元素底部的网格中的下一个开发区域。这种效果可以最小化处理不同高度的元素在垂直方向的间隙。

在上图中大家可以看到，在网格布局中使用float来处理不同高度的元素会使得垂直方向的元素间间隔比较大，而使用Masonry处理后，间隔变小。

使用方法

引入核心文件库

1 2	< script  src = "http://libs.useso.com/js/jquery/1.9.0/jquery.min.js" ></ script > < script  src = "jquery.masonry.min.js" ></ script >

构建html元素

1 2 3 4 5 6

< div  id = "container" >    < div  class = "item" >...</ div >    < div  class = "item" >...</ div >    < div  class = "item" >...</ div >    ... </ div >

写入CSS样式

1 2 3 4 5

.item {    width :  220px ;    margin :  10px ;    float :  left ; }

写入JS初始化插件

1 2 3 4 5 6 7

$( function (){    $( '#container' ).masonry({      // options      itemSelector :  '.item' ,      columnWidth : 240    }); });

如果你加载的元素中有图片的话，那么需要确保Masonry在所有图片都加载完后才执行，调用如下代码

1 2 3 4 5 6 7

var  $container = $( '#container' ); $container.imagesLoaded( function (){    $container.masonry({      itemSelector :  '.item' ,      columnWidth : 240    }); });

不使用jquery方法

使用js初始化

1 2 3 4 5 6

var  container = document.querySelector( '#container' ); var  msnry =  new  Masonry( container, {    // options...    itemSelector:  '.item' ,    columnWidth: 200    });

使用html初始化

目标元素添加js-masonry的样式类，所能的选项值可以以josn格式赋值给data-masonry-options。

1 2 3 4

< div  class = "js-masonry"  data-masonry-options = '{ "itemSelector": ".item", "columnWidth": 200 }' >    < div  class = "item" ></ div >    < div  class = "item" ></ div >    ...</ div >

更多参数设置请参考官文档

转载请注明：jQ酷 » jQuery动态网格瀑布流插件Masonry

 

下载地址： 本站下载 |  百度云 |  官方下载