Masonry - using with ImagesLoaded

Question

I have got Masonry and ImagesLoaded running, they both seem to be working fine.

But yet my images are still not loading in a perfect grid. Only once the screen has been moved a few times it loads correct.

You can see the page here: http://pagedev.co.uk/page-newsite/work.php

Any help would be great!

My html is:

<div class="grid">
  <div class="grid-sizer"></div>

    <div class="grid-item grid-item--width2">
        <img src="http://placehold.it/660x550">
    </div>

</div>

CSS:

.grid {
    width:85%;
    height:auto;
    margin:0px auto;
    position:relative;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- Work grid-item ---- */

.grid-sizer,
.grid-item {
  width: 25%;
  position:relative;
}

.grid-item {
  height: auto;
  float: left;
}

.grid-item img {
  width:100%;
  height:auto;
}

.grid-item--width2 { width:  50%; }

JS:

<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script>
$('.grid').imagesLoaded( function() {
    $('.grid').masonry({
      itemSelector: '.grid-item',
      columnWidth: '.grid-sizer',
      percentPosition: true
    });
});
</script>

Thank you in advance.

Lee