Massoneria Jquery: grondaie errate finché la finestra viene ridimensionata

Question

Ho un contenitore di larghezza percentuale con tre colonne. Io do queste colonne grondaie a larghezza fissa come questo:

width: -webkit-calc(33.33% - 16px); 
width: -moz-calc(33.33% - 16px); 
width: calc(33.33% - 16px); 

Questo è il mio codice Massoneria, in cui cambiare il numero di colonne come la finestra viene ridimensionata:

$(window).load(function() { 
    var columns = 3, 
    setColumns = function() { columns = $(window).width() > 959 ? 3 : $(window).width() > 640 ? 2 : 1; }; 

    setColumns(); 
    $(window).resize(setColumns); 

    $('#main-posts').masonry({ 
     itemSelector : '[class*=main-posts-]', 
     columnWidth : function(containerWidth) { return containerWidth/columns; } 
    }); 
}); 

Le grondaie tra le colonne sono troppo grandi quando la pagina viene caricata, ma si correggono quando la finestra viene ridimensionata. Qualcuno può aiutarmi con questo?

Ecco il link per la riprogettazione, che è molto presto nello sviluppo: http://keithpickering.net/redesign/

Lo sfondo verde sul contenitore è solo per illustrare ciò che sta accadendo.

Grazie ragazzi.

Answer 1

Aveva lo stesso problema, risolto risolvendo il metodo di layout dopo che la pagina è stata caricata. Non elegante ma funziona.

$(window).load(function(){ 

    var $container = $('#container'); 
    $container.masonry({ 
     gutter: 0, 
     itemSelector : '.content-box', 
     columnWidth: ".grid-sizer", 
     isResizable: true, 
    }); 
    /// call the layout method after all elements have been loaded 
    $container.masonry(); 

}); 

http://masonry.desandro.com/methods.html#layout