jQuery: Isotopo fluido funziona solo dopo il ridimensionamento

Question

Ho qualche problema con una griglia di isotopi fluida che sto configurando, una semplice griglia a 4 colonne, ogni .grid-block ha una larghezza del 24%, lasciando una tolleranza dell'1%.
Il problema è che, quando la pagina viene caricata, viene visualizzata come una griglia a 3 colonne finché la finestra del browser non viene ridimensionata e si incastra in 4 colonne.
Ecco una demo jsfiddle: 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 } 
    }); 
    }); 
}); 

io non riesco a capire perché questo sta accadendo/come risolvere il problema, la sua semplice, in realtà sto solo cercando di ottenere una semplice griglia 4 colonne quando la pagina viene caricata e quando viene ridimensionata. Ogni suggerimento sarà molto apprezzato!

Answer 1

jsFiddle Demo

La griglia è ottimizzata all'interno delle impostazioni per smartresize. È possibile effettuare una sola chiamata alla funzione di ridimensionamento quando la pagina si carica in questo modo:

$(window).smartresize();//I know it seems kind of simple, but it works