Masonry – 实现 Pinterest 模式的网格砌体布局

1

2

3

4

5

6

<div id="container">

  <div class="item">...</div>

  <div class="item w2">...</div>

  <div class="item">...</div>

  ...

</div>

1

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

1

2

.item { width: 25%; }

.item.w2
{ width: 50%; }

1

2

3

4

5

6

var
container = document.querySelector(‘#container‘);

var
msnry = new
Masonry( container, {

  // options

  columnWidth: 200,

  itemSelector: ‘.item‘

});

1

2

3

4

5

var
$container = $(‘#container‘);

$container.masonry({

  columnWidth: 200,

  itemSelector: ‘.item‘

});

1

var
msnry = $container.data(‘masonry‘);