Masonry 是一款 JavaScript 網格布局插件，可以實現類似 Pinterest 模式的砌體布局效果。通過把元素自動填充在垂直的空白區域，就像牆上堆砌的石頭一樣。這個庫還可以作為 jQuery 插件使用，幫助你輕松實現這種效果。
您可能感興趣的相關文章
在使用的時候，HTML代碼很簡單：
<div id="container"> <div class="item">...</div> <div class="item w2">...</div> <div class="item">...</div> ... </div>
另外在頁面中還需引入：
<script src="/path/to/masonry.pkgd.min.js"></script>
下面是簡單的 CSS 代碼示例：
.item { width: 25%; }
.item.w2 { width: 50%; }
如果當普通的 JavaScript 庫使用，代碼如下：
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
// options
columnWidth: 200,
itemSelector: '.item'
});
如果作為 jQuery 插件使用，代碼如下：
var $container = $('#container');
$container.masonry({
columnWidth: 200,
itemSelector: '.item'
});
可以通過如下方式獲取 Masonry 實例：
var msnry = $container.data('masonry');