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

我正在设置一个流体同位素网格有一些麻烦,一个简单的4列网格,每个.grid-block为24％宽度,留下1％的余量.
问题是,当页面加载时,它显示为3列网格,直到调整浏览器窗口大小并将其捕捉到4列.
这是一个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列网格,并且当它被调整大小时.任何建议将不胜感激！

解决方法

jsFiddle Demo

优化的网格位于smartresize的设置内.当页面加载时,您可以只调用resize函数：

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