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

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