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="touxiang-@3x.png">
  </div>
  <div class="item">
    <img src="test.png">
  </div>
  <div class="item">
    <img src="touxiang-@3x.png">
  </div>
  <div class="item">
    <img src="test.png">
  </div>
  <div class="item">
    <img src="touxiang-@3x.png">
  </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;即可。