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

干杯。

使用带有Isotope的layoutcomplete

1 个答案: