jQuery Masonry wrong top position

Question

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

It's working, however starting from the second row the top positions of the divs are miscalculated and are partly covering the elements of the first row.

It looks like the script quits before rearranging the elements.

Strangely, when I open the inspector in Chrome or slightly resize the viewport the divs are jumping to their correct positions. Refreshing the page sometimes helps, sometimes doesn't...

My masonry script:

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

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

Placing the masonry script in the page itself or in the header, footer doesn't change it's behaviour.

I'm calling 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 runs before all images have been loaded, you have to trigger it after the window loaded

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