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

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

您可能感兴趣的相关文章

• 创意无限！一组网页边栏过渡动画【附源码下载】
• 真是好东西！13种非常动感的页面加载动画效果
• 你见过吗？9款超炫的复选框（Checkbox）效果
• 超赞！基于 Bootstrap 的响应式的后台管理模板
• 太赞了！超炫的页面切换动画效果【附源码下载】

 

 

　　在使用的时候，HTML代码很简单：

?

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>

　　下面是简单的 CSS 代码示例：

?

1 2	.item { width: 25%; } .item.w2 { width: 50%; }

　　如果当普通的 JavaScript 库使用，代码如下：

?

1 2 3 4 5 6

var container = document.querySelector('#container'); var msnry = new Masonry( container, {   // options   columnWidth: 200,   itemSelector: '.item' });

　　如果作为 jQuery 插件使用，代码如下：

?

1 2 3 4 5

var $container = $('#container'); $container.masonry({   columnWidth: 200,   itemSelector: '.item' });

　　可以通过如下方式获取 Masonry 实例：

?

1	var msnry = $container.data('masonry');

　　

源码下载      效果演示

 

本文链接：Masonry – 实现 Pinterest 模式的网格砌体布局

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源