jQuery同位素:像碧昂丝的网站一样的流体设置只有在调整窗口大小后才有效。

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/

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 }
  });
});

1 个解决方案

#1

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

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!