同位素过滤能否与数百个项目和多个类别？

Question

我希望使用Isotope Jquery插件（http://isotope.metafizzy.co/）来显示和过滤数百个项目（大约700个）。每个项目将包含缩略图图像和名称，并且可以按三个类别过滤。 （为了阻止页面长得可笑，整个内容将包含在一个可滚动的div中。）

如果可能的话，我也想启用动画效果（使用“最佳可用”动画引擎，如果CSS3过渡不可用，它将依赖于JS。）

我已经在本地测试了大约100个项目，它在Chrome中执行得非常快，而且CSS3和JS动画都非常快。但是我担心在野外，对于老客户和浏览器来说可能会变得非常缓慢（当然，有一个非常紧迫的截止日期，所以没有多少时间来构建更好的原型！）。

有没有人有类似规模使用它的经验？

谢谢，

彼得

Answer 1

如果您正在进行过滤或排序，我建议您的项目数最多应为50项。这并不意味着你可以尝试推动它。例如，Leafly的项目数接近300。

Answer 2

好吧我现在可以回答我自己的问题，因为我们试图建立它。答案是，除了Chrome之外几乎所有浏览器都太慢了，它几乎可以接受。即使在快速Mac笔记本电脑上的Firefox中，从头开始加载页面大约需要5秒钟，并且将过滤器更改为“全部”也不会太少。它甚至对在Safari和IE中检查过它的几个人发出了无响应的脚本警告。

所以我重新编写它只是简单地在每个项目上添加/删除'hide'类。从快速比较中，这大约快了约50％。显然，这会失去所有奇特的动画。所以我建议将Isotope用于较小的数据集，其中时髦的视觉效果很重要，但不能处理数百个项目。