Jquery Masonry: Inkorrekte Rinnen, bis das Fenster in der Größe geändert wird

Question

Ich habe einen Container mit einer prozentualen Breite und drei Spalten. Ich gebe diese Spalten mit fester Breite Rinnen wie folgt aus:

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

Das ist mein Mauer Code, in dem ich die Anzahl der Spalten ändern, wenn die Fenstergröße verändert wird:

$(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; } 
    }); 
}); 

Die Rinnen zwischen den colums sind zu groß, wenn die Seite geladen wird, aber sie korrigieren sich selbst, wenn die Größe des Fensters geändert wird. Kann mir jemand dabei helfen? Hier

ist der Link zu der Neugestaltung, die sehr früh in der Entwicklung: http://keithpickering.net/redesign/

Der grüne Hintergrund auf den Behälter ist nur veranschaulichen zu helfen, was geschieht.

Danke Jungs.

Answer 1

Hatte das gleiche Problem, löste es durch Aufruf der Layout-Methode, nachdem die Seite geladen wurde. Nicht elegant, aber es funktioniert.

$(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