Jquery Murarskie: Nieprawidłowe rynny, dopóki okno nie zmieni rozmiaru

Question

Mam pojemnik o szerokości procentowej z trzema kolumnami. Daję te kolumny rynny o stałej szerokości tak:

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

To jest mój kod murarskie, w których mogę zmienić liczbę kolumn jak okno jest zmieniany:

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

rynien między colums są zbyt duże, gdy strona jest ładowana, ale same się korygują, gdy zmienia się rozmiar okna. Czy ktoś może mi w tym pomóc?

Oto link do przebudowy, która jest na bardzo wczesnym etapie rozwoju: http://keithpickering.net/redesign/

Zielone tło na opakowaniu jest tylko, aby pomóc zilustrować, co się dzieje.

Dzięki chłopaki.

Answer 1

Miał ten sam problem, rozwiązany przez wywołanie metody układu po załadowaniu strony. Nie elegancki, ale działa.

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