同位素項目在初始加載時重疊

Question

對this site使用砌體佈局，並且在第一次加載時，每個框都重疊。如果您使用任何導航項目進行排序，或者甚至只是停留在「全部」上，他們就會重新排列。有任何想法嗎？

Answer 1

我還沒有50的聲望，所以我不能評論，但我想分享一些我以前偶然發現的技巧，因爲我已經使用這個插件了很多，它可以幫助其他人。

首先，我絕對使用imageLoaded功能，因爲莎拉提到，而不是onload。 （https://github.com/desandro/imagesloaded）

提示1 - 要加快同位素插件自己動手（如果圖像尺寸是大的，或者你有很多人是有用的），您加載一個佔位符圖像的每個容器，那麼imagesloaded後插件觸發，你可以讓同位素插件快速開始工作。然後，您可以將真實圖像與包含真實src網址的data-attribute交換，只需使用同位素回調（http://isotope.metafizzy.co/events.html）即可。唯一的缺陷是你的圖片需要與佔位符尺寸相同，否則容器大小可能會變得混亂並重疊。

提示2 - 我從來沒有真的這樣做過，但我正在考慮使用的一種方法是將圖像作爲容器的背景圖像加載，設置高度並使用容器（或至少圖像部分），將圖片設置爲背景大小：封面;然後在同位素插件可以開始工作之前，您不必擔心加載的圖像。