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

Question

我在每个类别中有许多项目，但我只想在加载时显示每个类别的前 3 个项目，然后在过滤时，它应该显示该类别中的所有项目。我找到了一个number of posts，关于在选项中使用“过滤器”来只加载一个类别，但这不是我想要做的。我模拟了a codepen。现在，每个类别中有 4 个元素，但我只想在加载时显示每个类别中的 3 个。

这是我尝试过的一些事情。 1. 我在 CSS 中的所有项目中添加了 display:none，然后使用 lt() 从每个类中选择前 3 个项目以在加载时显示它们。

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

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

2) 与上面相同，但我在 CSS 中将不透明度设置为 0，使用以下内容将每个类别的前 3 个项目设置为可见，但正如预期的那样，addt 的位置只是“空”块l 项目将是因为它们仍然由同位素定位。

$('.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();