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

  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 模式的网格砌体布局

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

posted @ 2014-05-19 09:49  梦想天空(山边小溪)  阅读(7598)  评论(4编辑  收藏  举报