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的设置中。当页面加载时，您只需调用resize函数：

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

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

1 个答案: