masonry README

The project's README from github.com/desandro/masonry. As one markdown file: README.md.

Masonry

Cascading grid layout library

Masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

See masonry.desandro.com for complete docs and demos.

Install

Download

CDN

Link directly to Masonry files on 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>

Package managers

npm: npm install masonry-layout --save

Bower: bower install masonry-layout --save

Support Masonry development

Masonry has been actively maintained and improved upon for 8 years, with 900 GitHub issues closed. Please consider supporting its development by purchasing a license for one of Metafizzy's commercial libraries.

Initialize

With jQuery

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

With vanilla 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...
});

With HTML

Add a data-masonry attribute to your element. Options can be set in JSON in the value.

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

License

Masonry is released under the MIT license. Have at it.

Made by David DeSandro

masonry (desandro/masonry)

Searching Database…

16.7K ·GitHub
Masonry
这是什么？Masonry 是一个 JavaScript 网格布局库。它会根据可用的垂直空间，把元素放在最合适的位置，就像泥瓦匠把石头砌进墙里一样。
Masonry 布局到底是怎么排列内容的？它采用瀑布式排列：每个元素都根据可用的垂直空间放到最合适的位置，所以高度不同的内容会像墙里的石头一样紧密拼合，而不是整齐地排成一行一行。
怎么把它加到我的网站上？可以用 npm 安装（npm install masonry-layout --save）或 Bower 安装，也可以直接从 unpkg CDN 引入文件，或者下载 masonry.pkgd.min.js 后在页面中引用。
必须配合 jQuery 使用吗？不用。你可以用 jQuery 初始化 Masonry，也可以用原生 JavaScript，甚至完全不写脚本——只要在元素上添加 data-masonry 属性即可。
可以免费使用吗？商业用途也行吗？可以，Masonry 采用 MIT 许可证开源。作者只是希望你考虑购买一个 Metafizzy 商业库的许可证，来支持它的开发。
能不写 JavaScript 就设置布局选项吗？可以。在元素上添加 data-masonry 属性，并把选项以 JSON 的形式写在属性值里即可——不需要任何初始化脚本。
这个项目还在积极维护吗？是的。README 里提到 Masonry 已经持续维护和改进了 8 年，并在 GitHub 上关闭了 900 个 issue。
在哪里能看到演示和完整文档？在官方网站 masonry.desandro.com 上，那里有完整的文档和演示。
What are similar projects?isotope, tui.editor, jquery-ui, velocity, typeahead.js, dragula, jquery, jquery-pjax
Which topics is it in?jquery-plugin, grid, layout, jquery, vanilla-javascript, dom, javascript-library, browser, html, plugin, ui, web-development
Creator
desandro
Size
1.4 MB
Stars
16.7K
Updated
CommitJul 04Releasev4.2.2Jul 04
Age
16y
Commits · 90 Days