isotope gutter not perfect on page load but becomes perfect after window resize

Question

I have a responsive isotope grid and when it loads the grid, the horizontal gutter is obviously bigger than the bottom gutter but when I resize the window, it becomes equal.

I think I can fix it with the relayout function and I want to relayout the the grid after it loads the document but I don't know how. I've tried fixing the percentage of the grid but the grid keeps on not getting fit (which is really frustrating).

please see my fiddle here

css

    .item {
    float: left;
    height: 260px;
    background: blue;
    margin-bottom: 1%;
    overflow: hidden;
    } 
    .gutter-sizer {
    width: 1%;
    }
    .item, .grid-sizer {
        width: 24%;
    }
    .item.w2 {
        width: 49%;
    }
    .item.w3 {
        width: 74%;
    }
    .item.w4 {
        width: 99%;
    }
    .item.h2 {
        height: auto;
    }

I have this html like this

<div id="container">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<div class="item h2 w3"></div>
<div class="item h2"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item w2"></div>
<div class="item w3"></div>
<div class="item"></div>

my script:

      var $container = $('#container');
  // init
  $container.isotope({
      // options
      masonry: {
          columnWidth: '.grid-sizer',
          gutter: '.gutter-sizer'
      },
      itemSelector: '.item'
  });

A video showing the event on resize

http://www.screencast.com/t/eAg23hmXtD

Answer 1

The simpler answer is to add the imagesloaded script. The page will load the images first and then relayout the grid after. My mistake was that I included the imagesLoaded script but didn't added the actual imagesloaded plugin before.

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

<script type="text/javascript">

// initialize Isotope
var $container = $('#container').isotope({
  // options
  itemSelector: '.item',
  masonry: {
    columnWidth: '.grid-sizer',
    gutter: '.gutter-sizer'
  }
});
// layout Isotope again after all images have loaded
$container.imagesLoaded( function() {
  $container.isotope('layout');
});

</script>