jquery - jQuery：流体同位素仅在调整大小后工作

Question

我在设置一个流体同位素网格时遇到了一些问题，一个简单的 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 列网格，并在调整大小时。任何建议将不胜感激！

Answer 1

jsFiddle Demo

优化的网格位于 smartresize 的设置中。当页面像这样加载时，您可以只调用一次调整大小函数：

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