使用带有Isotope的layoutcomplete

Question

我正在使用Isotope放置一些工作正常的网格元素.现在我需要在layoutcomplete上运行一些代码,所以我添加了事件并最终得到以下代码.

var $container = $('.iso');
$container.imagesLoaded(function () {
    $container.isotope({
        ...
    });

    $container.isotope('on', 'layoutComplete',
        function (isoInstance, laidOutItems) {
            ...
        }
    );
});

除了在页面加载时不执行layoutcomplete之外,这一切都正常工作,当然这是因为在init之后添加了事件.然后我尝试设置isInitLayout:false但是接下来有什么问题 - 我希望我可以使用.arrange()但没有运气.

任何能弄清楚如何在页面加载时执行layoutComplete的人？

Answer 1

因为同位素很长一段时间我也脱掉了我的头发.但是,尽管我经历了它的2.0.1版本,但最终我们得到了一个稳定的插件.

您可以使用以下代码布置/重新布置同位素:

$container.isotope('layout');

我建议你使用isInitLayout: false.

另外请记住这一点,如果容器大小发生变化且同位素响应,则每次发生时都会触发layoutComplete.所以,你可能需要使用once而不是on.

var $container = $('.iso');
$container.imagesLoaded(function () {
    $container.isotope({
       isInitLayout: false
    });

    $container.isotope('on', 'layoutComplete',
        function (isoInstance, laidOutItems) {
            ...
        }
    );

    $container.isotope('layout');
});

干杯.