jQuery：流体同位素只有在调整大小后才工作 [英] jQuery: Fluid isotope only working after resize

问题描述

我在设置一个流体同位素网格时遇到一些麻烦，一个简单的4列网格，每个 .grid-block 宽度为24％一个1％的允许。

问题是，当页面加载它显示为一个3列网格，直到浏览器窗口调整大小，并捕捉到4列。

这里是一个jsfiddle demo： http://jsfiddle.net/BVzTV/4/

jQuery：

I'm having some trouble with a fluid isotope grid I'm setting up, a simple 4 column grid, each .grid-block being 24% width, leaving a 1% allowance.
The problem is though, when the page loads it's displaying as a 3 column grid until the browser window is resized and it snaps into 4 columns.
Here's a jsfiddle demo: 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 }
  });
    });
});

我不知道为什么会发生/如何修复它， m只是试图实现一个简单的4列网格当页面加载时，以及当它的大小。任何建议都非常感谢！

I can't figure out why this is happening / how to fix it, its simple really I'm just trying to achieve a simple 4 column grid when the page loads, and when it's resized. Any suggestions would be greatly appreciated!

推荐答案

jsFiddle Demo

jsFiddle Demo

是smartresize的设置内。您可以只调用resize函数，当页面加载如下：

The optimized grid is inside of the settings for smartresize. You could just make a single call to the resize function when the page loads like this:

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

这篇关于jQuery：流体同位素只有在调整大小后才工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！