序文:ウォーターフォール フローは、ウォーターフォール レイアウトとも呼ばれ、一般的な Web サイトのページ レイアウト方法です。つまり、等幅の要素を複数行配置し、それに次の要素を順番に追加します。これらの要素は、幅は同じですが高さが異なります。画像は、幅が要件を満たすまで元の比率に従って拡大縮小され、ルールに従って指定された位置に順番に配置されます。 ウォーターフォールレイアウトとは何ですか?まず効果を見てみましょう:
不完全な HTML コード: <div id="コンテナ"> <div class="box"> <div class="box-img"> <img src="./img/1.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/2.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/3.jpg" alt=""> </div> </div> </div> ......<!-- 写真は省略されています。必要な写真の枚数は自由に決められます--> 完全なCSSコード *{ パディング: 0; マージン: 0; } #容器{ 位置: 相対的; } 。箱{ フロート: 左; パディング: 15px; } .box-img { 幅: 150ピクセル; パディング: 5px; 境界線: 1px実線 #ccc ; ボックスシャドウ: 0 0 5px #ccc; 境界線の半径: 5px; } .box-img 画像{ 幅: 100%; 高さ: 自動; } 達成方法:簡単に言えば、ウォーターフォールレイアウトを実現したい場合は、次のことを行う必要があります✍ 1. 画像を取得する関数 getChildElement() { const contentArr = [] // 画像の読み込みに備えて配列を定義します。 const parent = document.getElementById(container) // ページ全体を取得します。 const allContent = parent.getElementsByTagName('*') // タグ全体を取得します。 console.log(allContent); (var i = 0; i < allContent.length; i++) { if (allContent[i].className == 'box') { contentArr.push(allContent[i])//class='box'のラベルを配列に読み込みます} } コンソールにログ出力します。 return contentArr //配列を返す} 2. 画像の帯域幅を設定するvar ccontent = getChildElement() var imgWidth = ccontent[0].offsetWidth // すべての画像の幅を最初の画像と同じにする 3. ブラウザページの1行に保存できる画像の最大数を計算するvar dWidth = document.documentElement.clientWidth // ページ幅 var num = Math.floor(dWidth / imgWidth) //Math.floor() は切り捨てます 4. 画像の高さを比較するウォーターフォール レイアウトでは、1 行目の画像がいっぱいになると、2 行目の最初の画像は 1 行目の最小の画像の下に配置する必要があるためです。 var BoxHeightArr = [] //配列を定義し、各画像の高さを順番にそこに入れます for (var i = 0; i < ccontent.length; i++) { もし(i < 数値){ BoxHeightArr[i] = ccontent[i].offsetHeight //画像の高さを配列に格納します} else { //最初の行に画像が収まらなくなった場合 var minHeight = Math.min.apply(null, BoxHeightArr) //前の行の最小の高さを比較します} } 5. 前の行で最小の高さの画像の位置を取得します。//getMinHeightLocation 関数を定義し、BoxHeightArr の前の行にあるすべての画像と minHeight の前の行にある画像の最小の高さを渡します。関数 getMinHeightLocation(BoxHeightArr, minHeight) { (変数 i 内の BoxHeightArr) { if (BoxHeightArr[i] === minHeight) { //画像の高さが最小の高さに等しい場合、画像の位置は最小の高さの画像の位置になります return i } } } 6. イラスト(var i = 0; i < ccontent.length; i++) { もし(i < 数値){ BoxHeightArr[i] = ccontent[i].offsetHeight } それ以外 { var minHeight = Math.min.apply(null, BoxHeightArr) var minIndex = getMinHeightLocation(BoxHeightArr, minHeight) ccontent[i].style.position = 'absolute' //挿入する画像を絶対的に配置します。つまり、要素の位置は「left」、「top」、「right」、および「bottom」属性によって指定されます。 ccontent[i].style.top = minHeight + 'px' //挿入された画像から上端までの距離が、その下に挿入される画像の高さとちょうど等しくなるようにします。 ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px' //挿入された画像から左端までの距離が、その下に挿入される画像から左端までの距離とちょうど等しくなります。 BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight //画像を挿入した後、この位置の高さは 2 つの画像の高さの合計に設定する必要があります。} } 完全なコードは次のとおりです。コードを最適化してパフォーマンスを向上させる window.onload = 関数() { imgLocation('container', 'box') //コンストラクタ imgLocation } //本文ページでの呼び出しを待たずに実行するには、window.onload = function() {} 関数を使用します //現在配置されている画像の数を取得します function imgLocation(parent, content) { //parent='container'、content='box' とします // 親の下にあるすべてのコンテンツを取得します var cparent = document.getElementById(parent) var ccontent = getChildElement(cparent, コンテンツ) var imgWidth = ccontent[0].offsetWidth var num = Math.floor(document.documentElement.clientWidth / imgWidth) cparent.style.cssText = `幅: ${imgWidth * num} px` var ボックス高さArr = [] (var i = 0; i < ccontent.length; i++) { もし(i < 数値){ BoxHeightArr[i] = ccontent[i].offsetHeight } それ以外 { var minHeight = Math.min.apply(null, BoxHeightArr) var minIndex = getMinHeightLocation(BoxHeightArr, minHeight) ccontent[i].style.position = '絶対' ccontent[i].style.top = minHeight + 'px' ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px' BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight } } // コンソールログ(BoxHeightArr); } 関数 getChildElemnt(親、コンテンツ) {親='コンテナ'、コンテンツ='ボックス' 定数コンテンツArr = [] const allContent = parent.getElementsByTagName('*') コンソールにログ出力します。 (var i = 0; i < allContent.length; i++) { if (allContent[i].className == コンテンツ) { contentArr.push(すべてのコンテンツ[i]) } } コンソールにログ出力します。 コンテンツを返すArr } 関数 getMinHeightLocation(BoxHeightArr, minHeight) { (変数 i 内の BoxHeightArr) { BoxHeightArr[i] === minHeight の場合 { 戻る } } } 上記は、JS を使用して Web ページのウォーターフォール フロー レイアウトを実装する方法の詳細です。JS を使用して Web ページのウォーターフォール フロー レイアウトを実装する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: MySQL を使用して Excel でデータ生成を完了する方法
>>: リモート Linux システムでポートが開いているかどうかを確認する 3 つの方法
私はフロントエンド プロジェクトの開発に常に vscode を使用してきたため、現在ではいくつかの小...
SQL (Structured Query Language) ステートメント、つまり構造化クエリ言...
<br /> 第 1 部と第 2 部では、Web サイトのパフォーマンス、ページ コンテ...
ORM とは何ですか? ORM は Object Relational Mapping の略で、オブ...
目次タグ付きユニオン型を使用した支払い方法の構築タグ付きユニオン型を使用した Redux アクション...
前回の Docker に関する記事では、MAC システムでの構築について説明しました。この記事では、...
このチュートリアルでは、MySQL 5.7のインストールと設定方法を参考までに紹介します。具体的な内...
目次序文こんにちは世界画像 境界線の半径を設定する実ピクセルを設定する外部CSSをインポートttfフ...
コード <div class="test"> <div>...
目次1. TypeScriptが古いVueプロジェクトに導入されるVue+Typescript プロ...
目次インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックスプッ...
新しい CSS プロパティ contain を紹介する前に、読者はページの再描画と再配置が何であるか...
背景: position:sticky はスティッキー配置とも呼ばれます。スティッキー配置の要素は、...
この記事は、Ubuntu 17.10 での Docker CE のインストールを記録するために使用さ...
1. mysql tar ファイルをダウンロードします。参考: 2. インストールパッケージがあるデ...