ホームページ > 記事 > ウェブフロントエンド > js_javascript スキルでウォーターフォール フローを実装する 3 つの方法の比較
js_javascript スキルでウォーターフォール フローを実装する 3 つの方法の比較
- WBOYオリジナル
- 2016-05-16 15:23:191123ブラウズ
ウォーターフォール フローは、ギザギザの複数列レイアウトで視覚的に表現される 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>
利点:
拡張は簡単で、コンテンツをコンテナに直接追加するだけです。
欠点:
高度なブラウザでのみ利用可能です。
もう 1 つの欠点があります。データ ブロックは上から下に一定の高さまで配置され、その後、残りの要素が順番に次の列に追加されます。これは本質的に異なります。
これら 2 つの主な欠点を考慮すると、この方法はハイエンドのブラウザに限定されることになり、複数列のテキスト配置により適しています。例
効果:
3. 絶対位置決め
最良の解決策は、データコンテンツを追加するのに便利です。ウィンドウが変更され、列/データブロックの数が自動的に調整されます。
利点:
データコンテンツを追加するとウィンドウが変わり、列/データブロックの数が自動的に調整されるので便利です。
データ ブロックに画像が含まれている場合は、その高さを知る必要があります。
JS はデータ ブロックの位置を動的に計算します。ウィンドウが頻繁にズームされると、パフォーマンスが消費される可能性があります。
もの:
1) データ ブロックの配置 (コンテナー内の既存の要素を配置)、アルゴリズムの手順を以下に簡単に説明します。
設定（ブロック要素の幅を同じにする）
· 初期化中に、コンテナ内の既存のデータ ブロック要素に対して最初の計算が実行されます。これには、ユーザーが次の情報を提供する必要があります。 a、コンテナ要素 - ウィンドウの合計幅を取得します。 b、列幅 (ブロック要素の幅)。 c、列の最小数 ;
・表示列数の計算：ウィンドウの幅をブロックボックスの幅で割って切り捨て、ウォーターフォール表示の中心を設定します
・各列の高さを保存
· 列の数を取得した後、各データ ブロックを追加するときに開始高さがわかるように、各列の現在の高さを保存する必要があります。
· コンテナ内のすべてのデータ ブロックを順番に取得し、最初に現在の高さが最も小さい列を見つけます。次に、左は列のシリアル番号に基づいてデータ ブロックの左と上の値を決定します。列に列の幅を乗じた値、top は列の現在の値、最後に更新された列の高さにデータ ブロック要素の高さを加えたものです。この時点で要素の挿入は終了します。
・全ての要素を挿入したら、コンテナの高さを各列の最大高さ値に調整し、順次調整を終了します。
2) データの非同期ロード (2 つのステップを含む):
· ロードデータ、関数パラメータが渡され、より便利な制御のためにデータロード機能とロード停止（ロード時に停止）機能を提供できます。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。