同位素项目在初始加载时重叠

Question

使用this site的砌体布局，并在第一次加载时每个框重叠。如果您使用任何导航项目进行排序，甚至只是保持“全部”，他们就会重新排列。有什么想法吗？

Answer 1

我还没有50的声誉，所以我无法评论，但我想分享一些我过去偶然发现的技巧，因为我已经使用了这个插件了很多，它可以帮助其他人

首先，我绝对使用像Sarah所提到的imageLoaded函数，而不是onload。 （https://github.com/desandro/imagesloaded）

提示1 - 为了加速同位素插件开始工作（如果图像大小很大，或者你有很多它们很有用），你为每个容器加载占位符图像，然后在imagesloaded插件触发后，你可以让同位素插件到达工作很快。然后，您可以将实际图像与包含真实src网址的数据属性交换，只需使用同位素回调（http://isotope.metafizzy.co/events.html）即可。唯一值得注意的是，您的图像需要与占位符具有相同的尺寸，否则容器的大小可能会混乱并再次重叠。

提示2 - 我从来没有真正这样做，但我想要使用的一种方法是将图像作为容器的背景图像加载，设置高度和容器（或至少是图像的一部分），将图像设置为背景尺寸：封面;然后你不必担心在同位素插件开始工作之前加载图像。