Primer

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.

Comparison Example

CSS Floats

1

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris.

2

Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit.

3

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Ut eget sem risus, et posuere velit. Aenean ac mauris non ligula.

4

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus.

5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

6

Cadipiscing in, lacinia vel, tellus.

7

Pellentesque a diam sit amet mi ullamcorper vehicula. adipiscing in, lacinia vel, tellus.

8

Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Suspendisse ac urna. Etiam pellentesque. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl. Suspendisse ac urna. Etiam pellentesque.

9

Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Pellentesque a diam sit amet mi ullamcorper vehicula. adipiscing in, lacinia vel, tellus.

10

Etiam pellen tesque mauris ut lectus.

11

Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspen disse ac urna. Ut condi mentum mi vel tellus.

12

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Masonry

1

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris.

2

Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit.

3

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Ut eget sem risus, et posuere velit. Aenean ac mauris non ligula.

4

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus.

5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

6

Cadipiscing in, lacinia vel, tellus.

7

Pellentesque a diam sit amet mi ullamcorper vehicula. adipiscing in, lacinia vel, tellus.

8

Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Suspendisse ac urna. Etiam pellentesque. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl. Suspendisse ac urna. Etiam pellentesque.

9

Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Pellentesque a diam sit amet mi ullamcorper vehicula. adipiscing in, lacinia vel, tellus.

10

Etiam pellen tesque mauris ut lectus.

11

Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspen disse ac urna. Ut condi mentum mi vel tellus.

12

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Minimum recommended configuration

Configuring Masonry is fairly easy. Simply attach the .masonry() method to the wrapping container element. 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.
    // Required for Infinite Scroll with window resizing.

    resizeable: true,
    // Binds a Masonry call to window resizes 
    // so layout appears fluid.
    // default: true

    animate: true,
    // Animates layout rearrangements.
    // default: false

    duration: 1500,
    // If animated, speed of animation.
    // default: 'normal'

    easing: 'linear',
    // If animated, the easing function of the animation.
    // default: 'swing'

    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 applicable elements Masonry just rearranged

);

No need to worry about how many columns, or width of gutters, or how big the container is. Thanks to the wonders of jQuery’s outerWidth() and innerWidth() methods, Masonry appropriately accounts for the space of any margin, padding, and border-width set with CSS.

Window Resizing

By default, Masonry binds a call to the browser window for resizing. But the rearrangement script is triggered only when the layout adds or loses a column, so you don’t have to worry about Masonry slowing down window resizes, or with fixed layouts.

Handling Images & Other Media

Since Masonry measures the height of the elements when placing them, you will need to account for images and other media that haven’t loaded yet. For images, the best method is to specify the width and height of images inline.

<img src="img_file.jpg" width="280" height="160" />

If you’re using a PHP-based CMS, you can use the getimagesize function.

If this is not possible or if you’re dealing with @font-face fonts, another option is to call Masonry after all media has loaded. This is done by calling the function inside of $(window).load() instead of $(document).ready().

$('window').load(function(){
    $('#wrapper').masonry({ columnWidth: 200 });
});

Since Masonry relies on absolute positioning, any anchor links that occur within or after the wrapping element will not work when the page first loads. The following script is one solution.

$('window').load(function(){
    if ( window.location.hash ) {
        var destination = $( window.location.hash ).offset().top;
        $('html:not(:animated),body:not(:animated)').scrollTop( destination );
    }
});

This will set the window of the document to the appropriate place. These couple lines were taken from Cedric Dugas’s anchorAnything.

Examples in the Wild

In addition to the examples below, see delicious links tagged with jquerymasonry and jQuery Masonry Collection on Ember for screenshots.

Changelog

v1.1.0: 29 Apr 2010
Add animation
v1.0.1: 19 Dec 2009
Bug fix, checks that container element exists and has children before running the script.
v1.0: 7 Dec 2009
Multi-column width support
Appending elements and Infinite Scroll support
Less obstrusive layout. No inserting additional markup.
Automatically binds event to window resizing
v0.4: 14 Jun 2009
Better fluid rearrangement support
v0.1: Feb 2009
Original release

License

jQuery Masonry is dual-licensed under GPL and MIT, just like jQuery itself. You can use it for both personal and commercial applications.