Jquery Masonry Images Are Overlapping Until A Page Resize Is Done

I've found this template that demonstrates the issue I'm having with jquery masonry and image layout. Take a look at this twitter bootstrap template page: The very first time the

Solution 1:

Use imagesLoaded() to triggered masonry after all images are loaded. (imagesLoaded() is provided by the script http://github.com/desandro/imagesloaded.)

$('.gallery-masonry').imagesLoaded( function(){
  $('.gallery-masonry').masonry({
   itemSelector: '.item',
   isAnimated: true,
   isFitWidth: true
  });
});

Solution 2:

The accepted answer has missing steps. So here is a step-by-step.

1. Go to the imagesloaded repo and download the minified version at https://github.com/desandro/imagesloaded/blob/master/imagesloaded.pkgd.min.js.
2. Add that library to your project.
3. At the bottom of your page call the file

```[Adjust path to your javascript files]

<script src="/js/masonry.pkgd.min.js"></script>
<script src="/js/imagesloaded.pkgd.min.js"></script>

<script>
  $('.gallery-masonry').imagesLoaded( function(){
    $('.gallery-masonry').masonry({
     itemSelector: '.item',
     isAnimated: true,
     isFitWidth: true
    });
  });
</script>