Masonryjs实现瀑布流

一、引入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