jquery - imagesLoaded で Masonry を使用する場合の画像間の空白

Question

Masonry を imagesLoaded で使用すると少し問題が発生します。画像間の間隔は、ウィンドウ サイズをズームすると消えてしまいます。誰かが私の問題の解決策を教えてくれることを願っています。

http://jsfiddle.net/7hs958sr/embedded/result/

HTML

<div id="container">
    <div class="grid-sizer"></div>
    <div class="item height2">
        <img src="http://thumbnails111.imagebam.com/34789/32a0b0347888848.jpg" alt="">
    </div>
    <div class="item">
        <img src="http://thumbnails111.imagebam.com/34789/c17f67347888951.jpg" alt="">
    </div>
    <div class="item">
        <img src="http://thumbnails111.imagebam.com/34789/c17f67347888951.jpg" alt="">
    </div>
    <div class="item">
        <img src="http://thumbnails111.imagebam.com/34789/c17f67347888951.jpg" alt="">
    </div>
    <div class="item">
        <img src="http://thumbnails111.imagebam.com/34789/c17f67347888951.jpg" alt="">
    </div>
    <div class="item">
        <img src="http://thumbnails111.imagebam.com/34789/c17f67347888951.jpg" alt="">
    </div>
    <div class="item height2">
        <img src="http://thumbnails111.imagebam.com/34789/32a0b0347888848.jpg" alt="">
    </div>
    <div class="item">
        <img src="http://thumbnails111.imagebam.com/34789/c17f67347888951.jpg" alt="">
    </div>
    <div class="item">
        <img src="http://thumbnails111.imagebam.com/34789/c17f67347888951.jpg" alt="">
    </div>
    <div class="item">
        <img src="http://thumbnails111.imagebam.com/34789/c17f67347888951.jpg" alt="">
    </div>
</div>
<!-- end container -->

CSS

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

.item{
    float: left;
    height: 295px;
}

img{
    width: 100%;
    height: 100%;
}

.height2{
    height: 590px;
}

JS

var $container = $('#container');

$container.imagesLoaded(function () {
    $container.masonry({
        columnWidth: '.grid-sizer',
        itemSelector: '.item'
    });
});