Jquery Masonry：ウィンドウのサイズが変更されるまで間違った溝が発生する

Question

3つの列を持つパーセンテージ幅のコンテナがあります。

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

colums間の側溝：これは、ウィンドウのサイズが変更されたとして、私は、列の数を変更する私の石造コード、ある

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

：私は、これらの列が固定幅このような雨どいを与えますページが読み込まれると大きすぎますが、ウィンドウのサイズが変更されたときに修正されます。誰かがこれで私を助けることができますか？ここで

は非常に初期の開発である再設計へのリンクは、次のとおりです。コンテナのhttp://keithpickering.net/redesign/

緑色の背景には、ちょうど何が起こっているかを示して支援することです。

ありがとうございます。

Answer 1

同じ問題があった場合は、ページが読み込まれた後にレイアウトメソッドを呼び出すことで解決しました。エレガントではないが機能する。

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