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

【问题标题】：jQuery: Fluid isotope only working after resizejQuery：流体同位素仅在调整大小后工作
【发布时间】：2013-06-20 07:09:40
【问题描述】：

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

【问题讨论】：

+1 - 非常好的问题。可通过演示和明确的问题重现。

标签： jquery html css jquery-isotope fluid-layout

【解决方案1】：

jsFiddle Demo

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

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

【讨论】：