Masonry实现JS瀑布流

瀑布流布局在很多网站都有应用，也是从国外流行起来的一种不规则布局，想要在网页端实现瀑布流效果可以借用Masonry插件。

一、引入Masonry文件

可以去官网下载到本地，也可以直接引入CDN，还可以用npm等包管理工具直接下载。此处用CDN引入。

官网地址：http://masonry.desandro.com

<script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.js"></script><!-- or --><script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script>

二、编写html结构和样式

<div id="container">  <div class="item">    <img src="[e-mail]">  </div>  <div class="item">    <img src="test.png">  </div>  <div class="item">    <img src="[e-mail]">  </div>  <div class="item">    <img src="test.png">  </div>  <div class="item">    <img src="[e-mail]">  </div>  <div class="item">    <img src="test.png">  </div>   </div>

<style>    #container{      margin: 0 auto;      background: red;    }    .item{      /*width: 100px;*/     /* 控制每个图片宽度 */      margin: 2px;    }</style>

三、初始化插件

$('#container').masonry({    itemSelector: '.item',    isAnimated: true,    // columnWidth: 450,         isFitWidth: true     // 自适应宽度  });

下面介绍下主要参数：

itemSelector     class选择器,默认'.item'，这个表示每个块的选择器 

columnWidth     一列的宽度 

isAnimated     使用jquery的布局变化,默认true 

animationOptions     animate属性渐变效果(Object { queue: false, duration: 500 }) 

gutterWidth     列的间隙 Integer 

isFitWidth     自适应浏览器宽度Boolean 

isResizableL     是否可调整大小 Boolean 

isRTL     使用从右到左的布局 Boolean

一般只需要用到：itemSelector、isFitWidth即可。先将每个需要自适应的元素放入div，并给定样式，此处是item。通过css可以控制每个item的宽度。

isFitWidth默认为false，开启后容器container将使用自适应宽度。然后用css控制居中margin:0 auto;即可。