jQuery ウォーターフォール絶対位置配置レイアウト (2) (画像の AJAX 読み込みの遅延)

ウォーターフォール フロー - 絶対配置レイアウトとフローティング レイアウトの違いは

1 レイアウトが異なります。
絶対配置: すべての絶対配置 LI を 1 つの UL に配置します。
フローティング レイアウト: 複数 (通常は 3 つまたは 4 つ) の UL を配布します。 ;
2. AJAX は異なります
絶対位置指定: 要求された JSON データ (もちろん、他の形式のデータでも構いません) を UL に挿入します。次に、この新しく挿入された LI に対して TOP と LEFT の設定を実行します。
フローティング配置: 要求された JSON データ (もちろん、他の形式のデータでも構いません) を対応する UL に挿入します。 絶対配置のため、設定する必要はありません。 LIの場所。自動的に下方向に配置されます。

1. 機能分析:

1. 各 LI の位置、つまり各 LI の TOP 値と LEFT 値を設定します。
2. AJAX データを LI に配置し、UL に挿入します。 ;

2. 実装プロセス:

1. LI の LEFT を設定します。列数に各 LI の幅を乗算すると、LEFT 値が決まります。パターンを見つけます。ここで 3 つの列が必要なので、各列の LI には共通の列番号が付きます (自分で 0.1.2 または 0.1.2 に設定します)。 A.B.C. つまり、これらの 3 つの列にラベルを付けます) ここでは、番号 0 の最初の列に
と設定されています
/ 番号 0 の 2 番目の li は番号 1 にあり、3 番目の li は番号 2 にあります
li は番号 0 にあり、5 番目の li は番号 1 にあり、6 番目の li は番号 2 にあります
そこで、インデックスモジュロを使用することを考えました、そして、ちょうどその 0 1 2, 0 1 2... を取得できます
これを通して、 LI がどの列であるかを判断できます。
index%3 = 0 1 2, 0 1 2...
なぜ 3 を法とする必要があるのでしょうか? 3 つの数値のサイクルを取得する必要があるからです。したがって、将来そのようなループを取得したい場合は、モジュロ演算を検討できます。2. TOP の値を設定します。各列の合計の高さの値が異なるためです。したがって、さまざまな列の高さの値を保存するには 3 つの変数を設定する必要があります。
なぜこの値を取得する必要があるのでしょうか？
1. 初めてロードするとき、LI の TOP 値は現在の列の高さの値に基づいて設定されます。
2. AJAX リクエスト後のデータ LI が UL に挿入されるため、それを知る必要があります。現在の列の現在の合計の高さを指定し、新しい LI がその TOP 値になります
実際、真ん中には言いたいことがたくさんあります。しかし、長すぎます。コード内のコメントも明確に書かれています。ご質問がございましたら、メッセージを残して私にご連絡ください。 ！ ！
一つ言及しておきたいのは、類似した関数がたくさんあるということですが、簡単に呼び出せるようにそれらを FUNCTION に記述しました。たとえば、LI の TOP と LEFT を設定し、LI の列数を取得し、列の合計の高さを設定します。これらはすべてパブリックな機能ブロックであるため、別の関数として記述することをお勧めします。中国語のサイトです！