Continuing Education

Guidelines - imagesLoaded plugin - Inline dimensions - $(window).load() - Typekit

Help · jQuery Masonry

jQuery Masonry

Docs

Demos

Help

jQuery Masonry is a fairly popular plugin. Chances are your issue has already been encountered by someone else.

Reporting bugs and issues

Report bugs and issues on GitHub.

Guidelines

  • Look over open and closed issues before submitting yours.
  • Add a link to a live site with the bug. If the project is confidential, try re-creating it in jsFiddle.

The issues tracker is for bugs and issues – when Masonry doesn’t work as expected. It is not for implementation issues – when you are having trouble setting up Masonry. I am unable to personally help with implementation issues but don’t give up!

Additional resources

Unloaded media and overlapping

The number one issue that pops up is overlapping content. This is most likely due to unloaded images.

imagesLoaded plugin

The easiest solution is to use the imagesLoaded plugin as shown in the intro. This small plugin will trigger a callback after all the images in the specified content have been loaded.

See Demo: Images.

Inline dimensions

Or you can specify the width and height of images inline.

src="img-file.jpg" width="280" height="160" />

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

$(window).load()

Another solution is to initialize Masonry inside $(window).load() instead of $(document).ready(). This will trigger Masonry after all the media on the page has loaded – images, fonts, external scripts and stylesheets, etc. This method is not recommended as it can cause ugly wait times.

$(window).load(function(){
$('#container').masonry({
// options...
});
});

@font-face fonts

Both Typekit and Google WebFont Loader provide font events to control scripts based on how fonts are loaded.

Typekit

Try the script below when using Masonry on a page with Typekit. This will trigger Masonry when the document is ready and again when fonts have loaded. Be sure to remove Typekit’s default script, try{Typekit.load();}catch(e){}.

var $container;

function triggerMasonry() {
// don't proceed if $container has not selected
if ( !$container ) {
return
}
$container.masonry({
// options...
});
}

$(function(){
$container = $('#container');
// trigger masonry on doc ready
triggerMasonry();
});

// trigger masonry when fonts have loaded
Typekit.load({
active: triggerMasonry,
inactive: triggerMasonry
});

First item breaks grid

If you run into an issue where you re-size the first item, and all the rest of the items no longer fit together in the grid, you most likely need to set columnWidth option. Without columnWidth set, Masonry will use the width of the first item for the size of its columns.

$('#container').masonry({
columnWidth: 220
});

Filtering

Filtering with Masonry is officially unsupported as of v2.0. Use Isotope instead. Isotope shares a majority Masonry’s features. It also has additional powerful features like filtering and sorting built right in, so you probably won’t be missing any functionality.

Getting data

You can access all the options and properties in a Masonry instance using the .data() method with the namespace 'masonry'.

$('#container').data('masonry');

Other frameworks

jQuery Masonry by David DeSandro