jQuery Isotope:Beyonce网站之类的流体设置仅在调整窗口大小之后才能工作

问题描述

尝试像Beyonce的网站一样 ，但使用同位素代替石工.

Trying to do like Beyonce's website but using Isotope instead of Masonry.

有人知道为什么默认情况下不起作用，而是仅在一个窗口调整大小之后才能起作用吗?

Any idea why this won't work by default, but only after one resizes ones window?

http://jsfiddle.net/RJZu6/

var $container = $("ul");

$container.imagesLoaded(function() {
  $container.isotope({
    itemSelector: "li",
    animationEngine: "jquery",
    sortBy: "random",

    // http://isotope.metafizzy.co/demos/fluid-responsive.html

    resizable: false,
    masonry: { columnWidth: $container.width() / 3 }
  });
});

$(window).smartresize(function() {
  $container.isotope({
    masonry: { columnWidth: $container.width() / 3 }
  });
});

推荐答案

http://jsfiddle.net/RJZu6/1/

var $container = $("ul");

var size = function () {
    console.log('wee!');
    $container.isotope({
        masonry: {
            columnWidth: $container.width() / 3
        }
    });
}

$container.imagesLoaded(function () {
    $container.isotope({
        itemSelector: "li",
        animationEngine: "jquery",
        sortBy: "random",
        resizable: false,
        masonry: {
            columnWidth: $container.width() / 3
        }
    });

    size();
});

$(window).smartresize(size);
// $(size); // this is an issue, because the images haven't yet loaded!

这篇关于jQuery Isotope:Beyonce网站之类的流体设置仅在调整窗口大小之后才能工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！