jQuery: Flüssiges Isotop funktioniert nur nach der Größenanpassung

Question

Ich habe Probleme mit einem flüssigen Isotopenraster, das ich aufstelle, ein einfaches 4-Spalten-Gitter, wobei jede .grid-block 24% Breite hat, was eine 1% Toleranz erlaubt.
Das Problem ist jedoch, wenn die Seite geladen wird, wird es als ein 3-Spalten-Raster angezeigt, bis das Browserfenster die Größe ändert und es in 4 Spalten einrastet.
Hier ist eine jsfiddle Demo: http://jsfiddle.net/BVzTV/4/
jQuery:

$(document).ready(function() { 
var $container = $('#main-grid'); 

$container.isotope({ 
    itemSelector: '.grid-block', 
    animationEngine: 'best-available', 
    resizable: false, 
    masonry: { columnWidth: $container.width()/4 } 
    }); 

    $(window).smartresize(function(){ 
    $container.isotope({ 
    // update columnWidth to a percentage of container width 
    masonry: { columnWidth: $container.width()/4 } 
    }); 
    }); 
}); 

ich kann nicht herausfinden, warum dies geschieht/wie man es zu beheben, seine einfache wirklich versuche ich nur ein einfachen 4 Stützenraster zu erreichen wenn die Seite geladen wird und wenn die Größe geändert wird. Irgendwelche Vorschläge würden sehr geschätzt werden!

Answer 1

jsFiddle Demo

Die optimierte Gitter ist innerhalb der Einstellungen für smartresize. Sie könnten die Funktion zur Größenanpassung nur einmal aufrufen, wenn die Seite wie folgt geladen wird: