jQuery Masonry

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.
    // Required for Infinite Scroll with window resizing.

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

);

Handling Images

Since Masonry measures the height of the elements when placing them, you will need to account for images that haven't loaded. 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, another option is to call Masonry after all the images have loaded. This is done by calling the function inside of $(window).load() instead of $(document).ready().

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

Resolving Anchor Links

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

• Astronaut Tumblr Theme
• Mortar
• Maxvoltar
• Andy Bridge
• Chromeography
• jQuery Style

Changelog

v1.0.1: 19 Dec 2009

Bug fix, checks that container element exists and has children before running the script.

v1.0: 6 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

Proper fluid resizing 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.