jquery masonry collapsing on initial page load, works fine after clicking “home” menu button

Question

My jquery masonry setup is working strangely on initial page load. It seems to be placing the images in the first row fine, the second row is positioned overlapping the first an

Answer 1

I think it's because the script is being run before the content (images) is fully loaded. Hence the positioning error.

Try this.

  $(window).load(function()
  {
      $('#content').masonry({
           itemSelector : '.product',
           columnWidth : 310,
           isAnimated: true,
           animationOptions: {
                duration: 700,
                easing: 'linear',
                queue: false
           }
      });
  });