jQuery：流体同位素仅在resize后才起作用

我正在设置一个流体同位素网格有一些麻烦，一个简单的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列网格，并且当它被resize时。 任何建议将不胜感激！

Answer 1

jsFiddle Demo

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

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