入门
HTML
引用 Masonry 文件
<script src="/js/masonry.pkgd.min.js"></script>
<div class="grid">
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
...
</div>
CSS
所有项目大小都由CSS处理。
.grid-item { width: 220px;margin: 10px;float: left; }
用jQuery初始化
你可以使用Masonry作为jQuery插件: $('selector').masonry();
$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 240
});
更多参数:
$(function(){
$('.grid').masonry({
// options 设置选项
itemSelector : '.item', //子类元素选择器
columnWidth : 240 ,//一列的宽度 ,包括边距 220+10+10
isAnimated:true, //使用jquery的布局变化,是否启用动画效果
animationOptions:{
//jquery animate属性 ,动画效果选项。比如渐变效果 Object { queue: false, duration: 500 }
},
gutterWidth:15,//列的间隙
isFitWidth:true,//自适应宽度
isResizableL:true,// 是否可调整大小
isRTL:false,//使用从右到左的布局
});
});
图片加载完后再调用:
var $grid = $('.grid');
$grid.imagesLoaded(function(){
$grid.masonry({
itemSelector : '.item',
columnWidth : 240
});
});