js_javascript スキルでウォーターフォールフローを実装する 3 つの方法の比較-jsチュートリアル-php.cn

js_javascript スキルでウォーターフォールフローを実装する 3 つの方法の比較

WBOY

リリース： 2016-05-16 15:23:19

オリジナル

1114 人が閲覧しました

ウォーターフォールフローは、ギザギザの複数列レイアウトで視覚的に表現される Web サイトのページレイアウトです。ページスクロールバーが下にスクロールすると、このレイアウトはデータブロックを継続的に読み込み、現在の末尾に追加します。このレイアウトを採用した最初の Web サイトは Pinterest で、国内で徐々に人気が高まりました。国内のフレッシュサイトは基本的にこのスタイルが多いです。

滝の特徴:

1. 見事な配列: ページ全体が主に写真であり、さまざまなサイズの写真が一定の規則に従って配置されています。
2.美的：絵のスタイルは主に美的絵です。
3. 簡単な操作: ウェブサイトを閲覧するとき、マウスホイールをそっとスライドするだけで、すべての素晴らしい写真が目の前に表示されます。

ウォーターフォールフローレイアウトの実装方法:
1. 従来のマルチカラムフローティング

・各列は固定幅で左に移動します。
・さらにデータをロードする場合は、別の列に挿入する必要があります。
レイアウトはシンプルで、特に難しい点はありません。

欠点:

列数が固定されているため、ブラウザのウィンドウサイズが変わると x 列しか固定できず、データブロックの配置を調整するのが困難です。 ;

スクロールしてさらにデータをロードする場合、どの列に挿入するかを指定するのは依然として不便です。

例:

効果:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>传统多列浮动</title>
  <style>
    div{
       float:left;
       margin: 5px 5px 5px 5px;
    }
    p{
      background: #90EE90;
      width:160px;
      text-align:center;
    }
  </style>
</head>
<body>
  <div>
    <p style="height:230px;">a1</p>
    <p style="height:100px;">a2</p>
  </div>
  
  <div>
    <p style="height:100px;">a3</p>
    <p style="height:300px;">a4</p>
  </div>

  <div>
    <p style="height:250px;">a5</p>
    <p style="height:200px;">a6</p>
  </div>
</body>
</html>

ログイン後にコピー

2. CSS3 スタイル定義

利点:

直接 CSS 定義するのが最も便利です。

拡張は簡単で、コンテンツをコンテナに直接追加するだけです。

欠点:

高度なブラウザでのみ利用可能です。

もう 1 つの欠点があります。データブロックは上から下に一定の高さまで配置され、その後、残りの要素が順番に次の列に追加されます。これは本質的に異なります。

これら 2 つの主な欠点を考慮すると、この方法はハイエンドのブラウザに限定されることになり、複数列のテキスト配置により適しています。

例

効果:

3. 絶対位置決め
最良の解決策は、データコンテンツを追加するのに便利です。ウィンドウが変更され、列/データブロックの数が自動的に調整されます。

利点:
データコンテンツを追加するとウィンドウが変わり、列/データブロックの数が自動的に調整されるので便利です。

欠点:

データブロックに画像が含まれている場合は、その高さを知る必要があります。

JS はデータブロックの位置を動的に計算します。ウィンドウが頻繁にズームされると、パフォーマンスが消費される可能性があります。

もの:

1) データブロックの配置 (コンテナー内の既存の要素を配置)、アルゴリズムの手順を以下に簡単に説明します。

設定（ブロック要素の幅を同じにする）
· 初期化中に、コンテナ内の既存のデータブロック要素に対して最初の計算が実行されます。これには、ユーザーが次の情報を提供する必要があります。 a、コンテナ要素 - ウィンドウの合計幅を取得します。 b、列幅 (ブロック要素の幅)。 c、列の最小数 ;
・表示列数の計算：ウィンドウの幅をブロックボックスの幅で割って切り捨て、ウォーターフォール表示の中心を設定します
・各列の高さを保存
· 列の数を取得した後、各データブロックを追加するときに開始高さがわかるように、各列の現在の高さを保存する必要があります。
· コンテナ内のすべてのデータブロックを順番に取得し、最初に現在の高さが最も小さい列を見つけます。次に、左は列のシリアル番号に基づいてデータブロックの左と上の値を決定します。列に列の幅を乗じた値、top は列の現在の値、最後に更新された列の高さにデータブロック要素の高さを加えたものです。この時点で要素の挿入は終了します。・全ての要素を挿入したら、コンテナの高さを各列の最大高さ値に調整し、順次調整を終了します。

2) データの非同期ロード (2 つのステップを含む):

· スクロールイベントをバインドし、プリロード行の高さの値を決定します。つまり、どの高さまでスクロールした後、データをロードする必要があります。実際、これは列の最小の高さの値であるため、比較することで決定できます。現在のスクロール値と最小の高さの値。

· ロードデータ、関数パラメータが渡され、より便利な制御のためにデータロード機能とロード停止（ロード時に停止）機能を提供できます。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。