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