一、引入Masonry
下载或从cdn引入
官网地址:http://masonry.desandro.com
二、编写html
<div id="container">
<div class="col-xs-12 col-sm-6 col-md-6 item">
<div class="thumbnail">
图文展示
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 item">
<div class="thumbnail">
图文展示
<div>
</div>
</div>
三、初始化
$('#container').masonry({
itemSelector: '.item',
isAnimated: true,
isFitWidth: true // 自适应宽度
});
下面介绍下主要参数:
itemSelector class选择器,默认'.item',这个表示每个块的选择器
columnWidth 一列的宽度
isAnimated 使用jquery的布局变化,默认true
animationOptions animate属性渐变效果(Object { queue: false, duration: 500 })
gutterWidth 列的间隙 Integer
isFitWidth 自适应浏览器宽度Boolean
isResizableL 是否可调整大小 Boolean
isRTL 使用从右到左的布局 Boolean