README

已废弃！请参阅heimrichhannot-contao-components/masonry

级联网格布局库

Masonry通过根据可用的垂直空间放置元素以优化位置来工作，有点像石匠将石头镶嵌在墙上。你可能在互联网上到处都看到过它的应用。

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

安装

下载

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

CDN

直接链接到Masonry文件在npmcdn。

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

软件包管理器

Bower: bower install masonry --save

npm: npm install masonry-layout --save

初始化

使用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制作

heimrichhannot / masonry

维护者

详细信息

README

安装

下载

CDN

软件包管理器

初始化

许可证