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>

HTML

在你的项目中引入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
});

配置项Options

1,itemSelector 详细介绍>>

用于指定参与布局的子组件。

itemSelector: '.grid-item'

2,columnWidth

设置组件的宽度

columnWidth: 80

3，Gutter

设置组件之间的间距

gutter: 10

使用CSS margin可设置组件的纵向间距

.grid-item {
  margin-bottom: 10px;
}

4，horizontalOrder

使组件水平方向按照从左到右排列

horizontalOrder: true

5，percentPosition

设置组件的位置（尺寸）为百分比而非像素数。percentPosition: true可以使宽度为百分比的组件不改变他们原本的位置。

// set positions with percent values
percentPosition: true,
columnWidth: '.grid-sizer',
itemSelector: '.grid-item'

6，Stamp

指定组件为stamp。Masonry在布局时会避开这些组件。

// specify itemSelector so stamps do get laid out
itemSelector: '.grid-item',
// stamp elements
stamp: '.stamp'

7，fitWidth

根据父级容器的尺寸，设置容器的宽，以适应可用的列数。启用之后将容器grid居中

fitWidth: true

8，originLeft

控制水平布局，默认状态下originLeft: true控件从左到右布局，设置originLeft: false后，控件从右向左布局。

originLeft: false

9，originTop

设置originTop: false后，自下而上布局

originTop: false

10，containerStyle

设置父级容器grid的css样式。默认状态下为position:’relative’，禁用grid容器的所有样式：containerStyle:null

// default
// containerStyle: { position: 'relative' }

// disable any styles being set on container
// useful if using absolute position on container
containerStyle: null

11，transitionDuration

控件改变位置或重排的缓动时间。默认为0.4s

// fast transitions
transitionDuration: '0.2s'

// slow transitions
transitionDuration: '0.8s'

// no transitions
transitionDuration: 0

12，stagger

控件重排的时间。当一个控件改变了位置，其他控件逐次的改变位置进行重排，stagger属性即为每个控件发生重排的缓动时间。，默认为值30（毫秒）

stagger: 30

13，resize

当窗口大小改变时控件重排以适应父级容器大小。默认为允许重排resize: true，在v3版本中使用isResizeBound，并在v4版本下兼容。

// disable window resize behavior
resize: false

14，initLayout

允许初始化布局，默认开启。
设置为initLayout: false，可以禁止初始化布局，你可以通过methods或者增加event事件的方法开启布局。V3版本使用isInitLayout。

var $grid = $('.grid').masonry({
  // disable initial layout
  initLayout: false,
  //...
});
// bind event
$grid.masonry( 'on', 'layoutComplete', function() {
  console.log('layout is complete');
});
// trigger initial layout
$grid.masonry();