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

Masonry 是一款 JavaScript 网格布局插件,可以实现类似 Pinterest 模式的砌体布局效果。通过把元素自动填充在垂直的空白区域,就像墙上堆砌的石头一样。这个库还可以作为 jQuery 插件使用,帮助你轻松实现这种效果。

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

 

在使用的时候,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');

源码下载      效果演示

赞 (0) 打赏