Advice on imagesloaded plugin for masonry

I'm having issues getting layout of Masonry to load the images correctly, I'm reasonably new to javascript and would appreciate some help and advice. I have tried imagesLoaded but am having a problem getting it to work correctly, mainly because I am not so sure that I am putting the right javascript in the right place.

Here is my loadedImages javascript taken from the site http://imagesloaded.desandro.com/

$('#container').imagesLoaded( function() {
});

$('#container').imagesLoaded( {

  },

function() {
}
);

$('#container').imagesLoaded()
  .always( function( instance ) {
    console.log('all images loaded');
  })
  .done( function( instance ) {
    console.log('all images successfully loaded');
  })
  .fail( function() {
    console.log('all images loaded, at least one is broken');
  })
  .progress( function( instance, image ) {
    var result = image.isLoaded ? 'loaded' : 'broken';
    console.log( 'image is ' + result + ' for ' + image.img.src );
  });

I have saved this as masonry.js and loaded it within the html.

Within the masonry.pkgd.min.js I have written:

$('.grid').masonry({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',

  // use element for option
  columnWidth: '.grid-sizer',
  percentPosition: true,

})

The masonry works, but when I refresh the page the layout breaks. If I adjust the browser it fixes itself. Here is the website to show you what is happening: http://www.elraymond.com/

Again, any advice or pointers to put this right will be very much appreciated.

Thanks

I think, the problem is, that the images are not fully loaded, before masonry gets calles... maybe its something wrong in the images loaded file...

never the less, i don't think, you need this library for it... try to create a new js file with the following code and include it AFTER the masonry file

$(window).on('load', function(){
    $('.grid').masonry({
      // set itemSelector so .grid-sizer is not used in layout
      itemSelector: '.grid-item',

      // use element for option
      columnWidth: '.grid-sizer',
      percentPosition: true,

    })
});

OFten, those libraries are not really needed.... the jQuery .on('load') function is for those cases and does as good as the same thing... the only difference is, that it waits until all resources from the page are loaded, not just image...