jQuery Masonry

  1. Primer
  2. Basic Examples
  3. Tumblelog Example
  4. Infinite Scroll Example

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.

Download jquery.masonry.js

Download jquery.masonry.min.js

The entire project including primer, demos and scripts is available for download on Github.

Report bugs and request new features at jQuery Plugins

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 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

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.