jquery - Jquery Masonry: ウィンドウのサイズが変更されるまでガターが正しくない

Question

3 列のパーセンテージ幅のコンテナーがあります。これらの列に次のような固定幅のガターを付けます。

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

これは、ウィンドウのサイズが変更されたときに列の数を変更する私の Masonry コードです。

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

ページが読み込まれると、列間のガターが大きすぎますが、ウィンドウのサイズが変更されると自動的に修正されます。誰かがこれで私を助けることができますか?

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

コンテナーの緑色の背景は、何が起こっているかを示すためのものです。

みんなありがとう。