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