Question

我有一个包含大量项目的容器，如下所示：

<div class="isotope">
    <div class="item"></div>
    ...
    <div class="item"></div>
</div>

我正在使用Isotope v3来应用Packery布局并准备过滤，如下所示：

var $iso = $('.isotope').isotope({
    itemSelector: '.item',
    layoutMode: 'packery',
    percentPosition: true,
    packery: {
        gutter: 0
    }
});

现在，当在加载时应用Packery布局时，容器的高度完全匹配项目堆栈。到目前为止，非常好。

但是，当我应用其中一个过滤器（使用$iso.isotope({filter: something})）时，容器的高度会发生变化，以匹配过滤后的项目堆栈。我认为这是有道理的，但由于高度的差异往往很大，这可能导致页面滚动/跳转到不同的位置，使得整体用户体验相当烦躁。

在这种情况下，我希望容器在第一次应用Packery布局（加载时）后保持其高度。我尝试过几件事，但无济于事。也许最值得注意的是，这些事情并没有像我希望的那样奏效：

应用resizesContainer: false（两者都是针对过滤的Isotope初始化）。这似乎没有做任何事情。
在Packery布局第一次运行后，在变量中存储高度，然后通过layoutComplete事件处理程序将所述高度应用于容器。这个以我想要的高度结束，但不会像通常那样改变它，使页面跳转两次，从而实际上使事情变得更糟。< / LI>
我在Stack Overflow上发现了类似的问题，但实际上却要求相反（例如，我如何调整容器大小），他们也没有帮助我，所以任何帮助都会受到赞赏。

应用过滤器后，我可以让Isotope容器保持其高度吗？

0 个答案: