masonry-layout
Cascading grid layout library
Last updated 2 years ago by desandro .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install masonry-layout 
SYNC missed versions from official npm registry.

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

Current Tags

  • 4.2.2                                ...           latest (2 years ago)

13 Versions

  • 4.2.2                                ...           2 years ago
  • 4.2.1                                ...           2 years ago
  • 4.2.0                                ...           3 years ago
  • 4.1.1                                ...           4 years ago
  • 4.1.0                                ...           4 years ago
  • 4.0.0                                ...           4 years ago
  • 3.3.2                                ...           5 years ago
  • 3.3.1                                ...           5 years ago
  • 3.3.0                                ...           5 years ago
  • 3.2.3                                ...           5 years ago
  • 3.2.2                                ...           5 years ago
  • 3.2.1                                ...           6 years ago
  • 3.2.0                                ...           6 years ago
Maintainers (1)
Downloads
Today 110
This Week 766
This Month 766
Last Day 161
Last Week 910
Last Month 3,404
Dependencies (2)
Dev Dependencies (14)
Dependents (155)

Copyright 2014 - 2016 © taobao.org |