README

层叠网格布局库

Masonry 通过根据可用垂直空间放置元素以实现最佳位置，类似于泥瓦匠将石头放置在墙上。你可能在互联网上的许多地方都见过它的应用。

请访问 masonry.desandro.com 以获取完整文档和演示。

安装

下载

• masonry.pkgd.js（未压缩），或者
• masonry.pkgd.min.js（压缩版）

CDN

直接链接到 Masonry 文件，请访问 unpkg。

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

包管理器

npm: npm install masonry-layout --save

Bower: bower install masonry-layout --save

支持 Masonry 开发

Masonry 已经持续维护和改进了8年，共关闭了900个 GitHub 问题。请考虑通过 购买 Metafizzy 的一些商业库的许可证 来支持其开发。

初始化

使用 jQuery

$('.grid').masonry({
  // options...
  itemSelector: '.grid-item',
  columnWidth: 200
});

使用纯 JavaScript

// vanilla JS
// init with element
var grid = document.querySelector('.grid');
var msnry = new Masonry( grid, {
  // options...
  itemSelector: '.grid-item',
  columnWidth: 200
});

// init with selector
var msnry = new Masonry( '.grid', {
  // options...
});

使用 HTML

在您的元素上添加一个 data-masonry 属性。选项可以在值中以 JSON 格式设置。

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>

许可

Masonry 在 MIT 许可 下发布。尽情使用。

由 David DeSandro 制作