jquery - jQuery Isotope：像 Beyonce 的网站这样的流体设置仅在调整窗口大小后才有效

Question

尝试像 Beyonce 的网站一样，但使用 Isotope 而不是 Masonry。

知道为什么默认情况下这不起作用，但只有在调整窗口大小之后？

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

Answer 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!