ウォーターフォール フロー絶対配置レイアウトとフローティング レイアウトの違いは
1 です。レイアウトは異なります。
絶対配置: すべての絶対配置 LI を 1 つの UL に配置します。
フローティング レイアウト: 複数 (一般的に) 3 つまたは 4 つ) UL は LI を配布します。
2. AJAX は異なります
絶対位置指定: 要求された JSON データ (もちろん、他の形式のデータでも構いません) を UL に挿入します。次に、新しく挿入された LI に対して TOP と LEFT の設定を実行します。
フローティング配置: 要求された JSON データ (もちろん、他の形式のデータでも可能) をそれぞれ対応する UL に挿入します。これは、絶対位置指定があるためです。 LIの位置を設定する必要があります。自動的に下方向に配置されます。
1. 関数分析:
1. 各 LI の TOP 値と LEFT 値を設定します。 ;
2. AJAX データを LI に配置し、UL に挿入します。
1. LI の LEFT を設定します。 🎜> どの列ですか?列数と各 LI の幅を掛け合わせて、LEFT 値を決定できます。 パターンを見つけます。
ここで 3 つの列が必要なので、各列の LI には共通の列番号が付いています (自分で設定します)。 0.1.2 または A.B.C、つまりこれら 3 つの列にラベルを付けます) ここでは、
数値 0 の 1 列目
数値 1 の 2 列目
数値 2 の 3 列目
とします。 > 各行について、 LI は 3 つだけ配置できます
最初の li は番号 0 にあり、2 番目の li は番号 1 にあり、3 番目の li は番号 2 にあります
4 番目の li は番号 0 にあり、 5 番目の li は番号 1 にあり、6 番目の li は番号 1 にあり、li は番号 2 にあります
したがって、インデックスを使用してモジュロを取ることを考えると、正確に 0 1 2, 0 1 2... を取得できます。
これにより、LI がどの列にあるかを判断できます。
Index%3 = 0 1 2, 0 1 2...
なぜ 3 つの数値のサイクルを取得する必要があるのでしょうか。 。したがって、将来そのようなループを取得したい場合は、モジュロ演算を検討できます。
2. TOP の値を設定します。これは、各列の合計の高さの値が異なるためです。したがって、さまざまな列の高さの値を保存するには 3 つの変数を設定する必要があります。
なぜこの値を取得する必要があるのでしょうか?
1. 初めてロードするとき、LI の TOP 値は現在の列の高さの値に基づいて設定されます。
2. AJAX リクエスト後のデータ LI は UL に挿入されるため、現在の列の高さの現在の合計の高さを知り、その TOP 値として新しい LI を指定する必要があります。
実際には、真ん中で言いたいことがたくさんあります。しかし、長すぎます。コード内のコメントも明確に書かれています。ご質問がございましたら、メッセージを残して私にご連絡ください。 ! !
言及すべきことの 1 つは、類似した関数が多数存在することです。簡単に呼び出せるように、それらを FUNCTION に記述しました。たとえば、LI の TOP と LEFT を設定し、LI の列数を取得し、列の合計の高さを設定します。これらはすべて public ブロックと function ブロックであるため、別の関数として記述することをお勧めします。
コードをコピー