Help

Masonry is a fairly popular script. 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!

jQuery Masonry

jQuery Masonry is the original, more robust version of Masonry. Along with all the benefits of jQuery (easier DOM selection, document-ready function), it has several features missing from Vanilla Masonry:

• jQuery animation
• itemSelector option
• Infinite scroll integration
• imagesLoaded plugin

Vanilla Masonry has the advantage of being lightweight, without any frame dependency, best suited for small applications. jQuery Masonry is better suited for larger, complex applications, when jQuery is already being used.

Additional resources

• The Metafizzy blog has posts that cover specialized use cases
• Stack Overflow questions about Masonry
• Other resources that are like Masonry but not

Unloaded media and overlapping

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

On window load

Masonry should be initialized on window load so that images are loaded first.

window.onload = function() {
  var wall = new Masonry( document.getElementById('container'), {
    // options...
  });
};

See Demo: Images.

Inline dimensions

Or you can 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.

DOM ready

Instead of initializing Masonry with window.onload, you use a DOM ready script to kick things as soon as possible.

• DOMReady by Mark McDonnell
• domready by Dustin Diaz
• See also Paul Irish’s lazyweb request for a DOMContentLoaded shim

For example, with DOMReady:

DOMready( function() {
  var wall = new Masonry( element, options );
});

If you are targeting just modern browsers that support DOMContentLoaded:

window.addEventListener( 'DOMContentLoaded', function() {
  var wall = new Masonry( element, options );
}, false );