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, подключите файлы напрямую с CDN unpkg или скачайте masonry.pkgd.min.js и добавьте его на свою страницу.
Обязательно ли использовать его вместе с jQuery?Нет. Вы можете инициализировать Masonry через jQuery, на чистом JavaScript или вообще без единой строчки кода — достаточно добавить атрибут data-masonry к элементу.
Можно ли пользоваться бесплатно, в том числе в коммерческих проектах?Да, Masonry распространяется по лицензии MIT. Автор лишь просит рассмотреть покупку лицензии на одну из коммерческих библиотек Metafizzy, чтобы поддержать их разработку.
Можно ли задать параметры раскладки без написания JavaScript?Да. Добавьте к своему элементу атрибут data-masonry и укажите параметры в его значении в формате JSON — никакой скрипт инициализации не нужен.
Проект еще развивается?Да. В README отмечается, что Masonry активно поддерживается и улучшается уже 8 лет, а на GitHub закрыто 900 issues.
Где посмотреть примеры и полную документацию?На официальном сайте 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