序文:ウォーターフォール フローは、ウォーターフォール レイアウトとも呼ばれ、一般的な 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 つの方法
これまでの数年間、私はいわゆる「設計仕様」についてかなりの数の執筆やコンサルティングを行ってきました...
目次序文アイデアの起動速度Tomcat ログが文字化けしている序文Idea を再インストールしたので...
目次成果を達成する実装コード最近、会社でelementUIを使い始めたため、開発の過程でテーブルのセ...
目次1. はじめに2. 設定手順1. はじめに1. NAT モード (VMnet8) は、仮想マシン...
1. はじめに少し前、開発者がテスト環境や本番環境で誤った操作をし、データベースを誤って削除/更新し...
ウェブを閲覧しているときに 404 ページに遭遇することはあまりないので、見落としがちです。しかし、...
クロージャは、純粋関数型プログラミング言語の伝統的な機能の 1 つです。クロージャをコア言語構造の不...
目次問題の説明解決問題分析問題の説明MySQL で delete ステートメントを使用してデータを削...
みなさんこんにちは。今日はv-modelを使って親子コンポーネントのバインディング効果を実現する方法...
何もすることがなかったので、学習用に最も安いAlibaba Cloudサーバーを購入しました。年間3...
目次1. シナリオの説明2. 解決策オプションが多すぎる el-select コンポーネントの解決策...
HTML POST リクエストで a タグを使用する 2 つの例を次に示します。 1. ajaxを使...
目次序文1. Axiosの紹介2. HTTPインターセプターの設計と実装2.1 インターセプターの紹...
クールなフロントエンドページのランダムQRコード検証を参考までに共有します。具体的な内容は次のとおり...
導入インストールするシステムの数が多い場合、USB フラッシュ ドライブまたは CD を使用した手動...