Masonry - 非常简单实用的瀑布流插件（附实例和中文文档）

Masonry简介

Masonry是什么？

Masonry是一个JavaScript网格布局库。它的作用是在可用的竖直空间上将页面元素放置于页面最佳位置处，就像泥瓦匠将石头往墙上砌一样。你应该已经在网上很多地方见过它了。瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。（效果如上图）

官网：

Masonry官方文档

Masonry中文文档

Masonry实例DEMO

下载安装

1,可以从官方网站下载

2,也可以直接在unpkg引用Masonry的CDN静态文件

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

基本使用

在你的项目中引入Masonry.js

<script src=“/path/to/masonry.pkgd.min.js”></script>

Masonry的运行需要一个包含一些列子组件的grid容器标签

<div class=“grid”>
<div class=“grid-item”>…</div>
<div class=“grid-item grid-item--width2”>…</div>
<div class=“grid-item”>…</div>
…
</div>

CSS

你可以通过CSS控制所有组件的尺寸

.grid-item { width: 200px；}
.grid-item--width2 { width: 400px；}

通过JQuery初始化

你可以将Masonry作为一个JQuery插件来使用$（'selector'）.masonry（）

$（'.grid'）.masonry（{
// options
itemSelector: '.grid-item',
columnWidth: 200
}）；

通过原生JavaScript初始化

你可以通过原生JS使用Masonry:new Masonry（elem，options）。构造函数Masonry（）接收两个参数：容器标签和配置对象。

var elem = document.querySelector（'.grid'）；
var msnry = new Masonry（elem，{
// options
itemSelector: '.grid-item',
columnWidth: 200
}）；
// element argument can be a selector string
//for an individual element
var msnry = new Masonry（'.grid'，{
// options
}）；

在HTML中初始化

你也可以在HTML中初始化Masonry，这样不需要书写任何JavaScript。在容器标签中增加data-masonry属性，其值则是Masonry组件的配置

<div class=“grid”data-masonry='{“itemSelector”：“.grid-item”，“columnWidth”：200 }'>

注意：在HTML中必须以JSON格式配置，key必须带引号，例如：“itemSelector”：。data-masonry的值使用单引号，JSON使用双引号。

在Masonry v3版本，HTML初始化需要使用特定的class: js-masonry，设置配置需要属性data-masonry-options，在Masonry v4之后版本中，这种写法也是兼容的。

<div class=“grid js-masonry”
data-masonry-options='{“itemSelector”：“.grid-item”，“columnWidth”：200 }'>

主要参数

   // options
   itemSelector: '.grid-item', //附加选择器，用来指定哪些元素包裹的元素会重新排列。
   columnWidth: 200, //第1列网格的宽度，单位为像素（px）, 默认： 第一个浮动元素外宽度。
   percentPosition:true, //将元素定位设成百分比。true后，元素宽度自动适应容器的尺寸变化。
   gutter: 10, //元素水平方向的间隙
   horizontalOrder: true,
   singleMode: false,//禁用测量每个浮动元素的宽度。如浮动元素具有相同的宽度，设为true。默认 false。
   resizeable: true, // 绑定一个Masonry访问，窗口resize时布局平滑流动。默认：true。
   animate: true, // 布局重排动画。默认：false。
   animationOptions: {}, //一对动画选项，具体参数可以参考jquery .animate()中的options选项。
   appendedContent: $('.new_content'),
   //  附加选择器元素，用来尾部追加内容。
   // 在集成infinitescroll插件的情况下使用。
   saveOptions: true,
   // 默认情况下，Masonry 将使用以前Masonry使用过的参数选项,所以你只需要输入一次选项。
   // 默认：true
   stamp:'.grid-stamp',
   // 网格中的固定元素，不会因重新布局改变位置，移动元素填充到固定元素下方
   fitWidth: true, // 设置网格容器宽度等于网格宽度，这样配合css的auto margin实现居中显示
   originLeft: true, // 默认true网格左对齐，设为false变为右对齐
   originTop: true, // 默认true网格对齐顶部，设为false对齐底部
   containerStyle: { position: 'relative' }, // 设置容器样式
   stagger: '0.03s', 
   //重布局时网格并不是一起变换的，排在后面的网格比前一个延迟开始，该项设置延迟时间  
   initLayout: true, //初始化布局，设未true可手动初试化布局
   
isAnimated     使用jquery的布局变化,默认true 
animationOptions     animate属性渐变效果(Object { queue: false, duration: 500 }) 
gutterWidth     列的间隙 Integer 
isFitWidth     自适应浏览器宽度Boolean 
isResizableL     是否可调整大小 Boolean 
isRTL     使用从右到左的布局 Boolean