同位素过滤 - 在页面加载时从每个类别加载特定数字

Question

我在每个类别中都有很多项目，但我只想在加载时显示每个类别的前 3 个，然后在过滤时，它应该显示该类别的所有项目。我找到了 number of posts about using "filter" in the options to only load a single category, but that's not what I'm trying to do. I've mocked up a codepen。现在，每个类别中有 4 个元素，但我只想在加载时显示每个类别中的 3 个。

以下是我尝试过的一些方法。 1. 我将 display:none 添加到 CSS 中的所有项目，然后使用 lt() select 每个 class 中的前 3 个项目以在加载时显示它们。

$('.webinar.item:lt(3), .video.item:lt(3), .printable.item:lt(3)').show();

这在加载时运行良好，但在过滤时所有项目一旦最初隐藏就会消失。 Isotope 不会向过滤的项目添加 display:block，因此 CSS 在页面加载后覆盖并隐藏这些项目。我更改了同位素文件以添加 display:block;当过滤器时，但这确实弄乱了动画并在过滤类别时导致大量跳跃。

2) 与上面相同，但我在 CSS 中将不透明度设置为 0，使用以下方法将每个类别的前 3 个项目设置为可见，但正如预期的那样，只有 "empty" 阻止附加项目所在的位置，因为它们仍然由同位素定位。

$('.webinar.item:lt(3), .video.item:lt(3), .printable.item:lt(3)').css('opacity', '1');

如前所述，我只想在加载时显示每个类别的前 3 项。感谢您的帮助。

Answer 1

好吧，显然我只需要输入所有内容就可以得出我自己问题的答案。 :) 对于那些找到此线程并希望做类似事情的人，这就是我所做的。

我使用 jQuery 来隐藏所有项目而不是 CSS，所以它只会发生一次。

我隐藏了列表中的所有项目

$('.isotope-list .item').hide();

然后，使用 lt() 显示每个类别的前 3 个。这允许我在加载时只显示 3，并且不会以任何方式干扰过滤。

$('.webinar.item:lt(3), .video.item:lt(3), .printable.item:lt(3)').show();