Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including masonry-layout with all npm packages installed. Try it out:

var masonryLayout = require("masonry-layout")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

masonry-layout v4.2.0

Cascading grid layout library

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

Bower: bower install masonry --save

npm: npm install masonry-layout --save

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free