webtourismus/masonry

https://npmjs.net.cn/package/masonry-layout 的镜像，作为 Drupal 库

维护者

详细信息

github.com/webtourismus/masonry

主页

源代码

问题

安装: 50

依赖者: 0

建议者: 0

安全: 0

星标: 0

关注者: 1

分支: 0

开放问题: 0

语言：JavaScript

类型：drupal-library

v4.4.2 2022-11-04 16:42 UTC

MIT 0c82047182b07458a6d8d5062f307f106dca5835

This package is auto-updated.

Last update: 2024-09-04 21:42:45 UTC

README

级联网格布局库

Masonry 通过在可用的垂直空间中放置元素到最佳位置来工作，有点像石匠在墙上铺石头。你可能在网上到处都见过它的使用。

查看完整的文档和演示，请访问 masonry.desandro.com。

安装

下载

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