JQuery masonry wrong top position

Question

I am using Twitter Bootstrap with a fixed layout along with jQuery Masonry on a specific page.

It works, however, starting from the second line, the top divs are erroneously calculated and partially cover the elements of the first line.

It appears that the script exits before permuting the elements.

Oddly enough, when I open inspectors in Chrome or slightly resize the viewport, divs jump to their correct positions. Sometimes it’s useful to refresh the page, sometimes it doesn’t ...

My masonry script:

jQuery(document).ready(function(){ jQuery('.span9').masonry({ itemSelector: '.span3', columnWidth: function( containerWidth ) { return containerWidth / 3; } }); }); 

Is this normal behavior? Should I add window.resize to the above script?

Placing the masonry script on the page itself or in the header, the footer does not change its behavior.

I call masonry.js right after jQuery before any other Bootstrap js.

Answer 1

Just read the help section here http://masonry.desandro.com/docs/help.html

The script is executed before all images are loaded, you must call it after the window loads

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