jQuery：流体同位素仅在调整大小后起作用

我在设置流体同位素网格时遇到了一些麻烦，一个简单的 4 列网格，每个网格.grid-block宽度为 24%，留有 1% 的余量。
但问题是，当页面加载时，它会显示为 3 列网格，直到调整浏览器窗口大小并捕捉到 4 列为止。
这是一个 jsfiddle 演示：http://jsfiddle.net/BVzTV/4/ 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 列网格。任何建议将不胜感激！

jsFiddle Demo http://jsfiddle.net/9x9eG/

优化的网格位于 smartresize 设置内。当页面加载时，您只需调用一次调整大小函数即可，如下所示：

$(window).smartresize();//I know it seems kind of simple, but it works