jquery - jQuery Isotope - レスポンシブ/流動的なグリッド内で動作しない

Question

私は、David DeSandro による素晴らしい Isotope プラグインを利用するフォトブログを作成中ですが、現在、プラグインをレスポンシブ/流動グリッド内で意図したとおりに機能させるのに苦労しています。

www.lewismalpas.co.uk/tumblr (デモ)

各画像は、25% の明示的な幅を持つ div (.item) 内にラップされます。画像は柔軟であるため、理論的には 4 つの画像をインラインで表示できるはずですが、現時点では 2 つしか表示されていないようです。問題を理解するために。

<script type="text/javascript">
$(document).ready(function(){

//scroll to top of page
$("a.top").click(function () {
    $("body,html").animate({scrollTop: 0}, 800);
    return false;
});

//Isotope settings
var $container = $('.images')
$container.imagesLoaded( function(){
    $container.isotope({
        resizable: false, // disable normal resizing
        masonry: { columnWidth: $container.width() / 4 }
    });
    // update columnWidth on window resize
    $(window).smartresize(function(){
        $container.isotope({
            masonry: { columnWidth: $container.width() / 4 }
        });
    });
});

//layout & search options
$(".header #layout").hide();
$(".header a.layout").click(function() {
    $(".header #layout").fadeIn();

    $(".header a.fullscreen").click(function() {
        $("a.layout-option").removeClass("selected");
        $(this).addClass("selected");
        $("#container").animate({width:"99%"}, function() {
            $(".images").isotope('reLayout');
        });
    });
    $(".header a.grid").click(function() {
        $("a.layout-option").removeClass("selected");
        $(this).addClass("selected");
        $("#container").animate({width:"80%"}, 800);
        $('#images').isotope({itemSelector:'.item',layoutMode:'masonry'});
    });
    $(".header a.linear").click(function() {
        $("a.layout-option").removeClass("selected");
        $(this).addClass("selected");
        $("#container").animate({width:"80%"}, 800);
        $('#images').isotope({itemSelector:'.item',layoutMode:'straightDown'});
    });
});

$(".header #search").hide();
$(".header a.search").click(function() {
    $(".header #search").fadeIn();
});

}); //end doc ready
</script>