jquery - jQuery:サイズ変更後にのみ機能する流体同位体

Question

私が設定している流体同位体グリッド、単純な 4 列のグリッド、それぞれ.grid-blockが 24% の幅で、1% の許容値を残して問題が発生しています。
ただし、問題は、ページが読み込まれると、ブラウザ ウィンドウのサイズが変更されて 4 列にスナップされるまで、3 列のグリッドとして表示されることです。
jsfiddle のデモは次のとおりです: http://jsfiddle.net/BVzTV/4/
jQuery:

$(document).ready(function() {
var $container = $('#main-grid');

$container.isotope({
    itemSelector: '.grid-block',
    animationEngine: 'best-available',
    resizable: false,
    masonry: { columnWidth: $container.width() / 4 }
    });

    $(window).smartresize(function(){
  $container.isotope({
    // update columnWidth to a percentage of container width
    masonry: { columnWidth: $container.width() / 4 }
  });
    });
});

なぜこれが起こっているのか/それを修正する方法がわかりません.ページがロードされ、サイズが変更されたときに、単純な4列のグリッドを実現しようとしているだけです。どんな提案でも大歓迎です！