同位体アイテムは初期荷重で重複します

Question

this siteのための石積みレイアウトを使用し、最初のロード時に各ボックスが重なります。並べ替えに、または単に「すべて」にとどまるためにナビゲーション項目のいずれかを使用すると、それらは並べ替えられます。何か案は？

Answer 1

私は50の評判はまだありませんので、私はコメントすることはできませんが、私はこのプラグインを多く使用したので、過去に私が遭遇したヒントをいくつか共有したいと思います他の人。

まず、サラが述べたようにimageLoaded関数を使用しますが、オンロードではありません。 （https://github.com/desandro/imagesloaded）

ヒント1 - は（画像サイズが大きい場合、またはあなたがそれらの多くを持っている場合に便利）動作するようになった同位体のプラグインをスピードアップするためには、imagesloaded後、その後、各コンテナのためのプレースホルダ画像を読み込みますプラグインの火災、あなたは同位体のプラグインをすぐに動作させることができます。次に、実際の画像URLを含むデータ属性で実際の画像を入れ替えることができます。アイソトープコールバック（http://isotope.metafizzy.co/events.html）を使用してください。唯一の注意点は、画像がプレースホルダと同じ寸法を持つ必要があるか、コンテナのサイジングが乱れて再び重なり合う可能性があることです。

ヒント2 - 私は実際にこれをしたことはありませんが、私が考えていた方法の1つは、画像をコンテナの背景画像としてロードし、高さをコンテナ（または少なくとも画像部分そのイメージをbackground-sizeとして設定する：cover;アイソトーププラグインが動作する前に画像の読み込みを心配する必要はありません。