使用Masonry with imagesLoaded时图像之间的空白区域

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'
    });
});