Masonry
December 6, 2009 - 9:41pm — desandro
Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
Minimum recommended configuration
Configuring Masonry is fairly easy. Simply attach the .masonry() method to the wrapping container element in your jQuery script. Depending on the layout, you'll most likely need to specify one option.
For layouts with elements that span multiple widths:
$('#wrapper').masonry({ columnWidth: 200 });
For layouts with elements that span the same width:
$('#wrapper').masonry({ singleMode: true });
All options
$('#wrapper').masonry({
singleMode: false,
// Disables measuring the width of each floated element.
// Set to true if floated elements have the same width.
// default: false
columnWidth: 240,
// Width in pixels of 1 column of your grid.
// default: outer width of the first floated element.
itemSelector: '.box:visible',
// Additional selector to specify which elements inside
// the wrapping element will be rearranged.
resizeable: true,
// Binds a Masonry call to window resizes.
// default: true
appendedContent: $('.new_content'),
// Additional container element for appended content.
// Useful for Infinite Scroll integration.
saveOptions: true,
// Masonry will use the options from previous Masonry
// calls by default, so you only have to enter in options once
// default: true
}, function() {}
// Optional callback.
// 'this' will refer to the elements Masonry just rearranged
);Releases
| Official releases | Date | Size | Links | Status | |
|---|---|---|---|---|---|
| 1.0.1 | 2009-Dec-26 | 8.11 KB | Recommended for 1.2.x |  | |