html - 绝对定位元素的性能

Question

我很感激我可以“试一试看看”，但我宁愿在这里谨慎行事，并询问是否有人有这方面的经验或知识可以回答 ;)

我正在开发一项功能，该功能将在类似 Canvas 的容器中包含许多元素(大约 800 个)。所有这些都是<div>带有 background-image 的元素.它们将与网格对齐。

我对涉及 transition 的简洁动画有一些想法当添加或删除其中一些元素时将元素移动到新位置 - 这将涉及 position:absolute和设置 left和 top适本地。

我想知道浏览器处理这类事情的效果如何，或者我是否最好只使用 display:inline-block并让它们随心所欲地流动——尽管没有整齐的过渡。

简而言之，我只是想知道是否使用 position:absolute ， IE。从文档流中移除元素，与简单地允许元素存在于文档流中相比，浏览器在更新时无法处理。

这有意义吗？我觉得我的措辞很糟糕 XD

Answer 1

如果所有元素都具有相同的高度，那么我会使用 display:inline-block 或 float:left，它们会很好地组合在一起。

如果元素具有不同的高度，当它们 float 或显示为内联 block 时，它们将不会完美地“排成一行”。

对于后者，使用 jquery 插件，例如 Masonry将是一个明智的解决方案。砌体使用您的问题所指的绝对定位，不，浏览器“无法处理”并不过分。

当然，如果您的 div 具有相同的高度，您仍然可以使用 Masonry。

如果没有像 Masonry 这样的脚本解决方案，我怀疑在 800 个元素上使用绝对定位来实现您想要的结果是否是个好主意。