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');
本文链接：Masonry – 实现 Pinterest 模式的网格砌体布局
编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
作者：山边小溪
主站：yyyweb.com 记住啦：）
欢迎任何形式的转载，但请务必注明出处。
