JS を使用して Web ページのウォーターフォール レイアウトを実装する方法

JS を使用して Web ページのウォーターフォール レイアウトを実装する方法

序文:

ウォーターフォール フローは、ウォーターフォール レイアウトとも呼ばれ、一般的な Web サイトのページ レイアウト方法です。つまり、等幅の要素を複数行配置し、それに次の要素を順番に追加します。これらの要素は、幅は同じですが高さが異なります。画像は、幅が要件を満たすまで元の比率に従って拡大縮小され、ルールに従って指定された位置に順番に配置されます。

ウォーターフォールレイアウトとは何ですか?

まず効果を見てみましょう:

  • 画像は等幅の要素が複数行に配置され、次の要素が等幅だが高さが異なる形で順番に追加されます。画像は、幅が要件を満たすまで元の比率に従って拡大縮小され、その後、ルールに従って指定された位置に順番に配置されます。
  • 理解しやすいように、HTMLとCSSのコードをここに示します。

不完全な 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 の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JSは画像の滝の流れの効果を実現します
  • js を使用してウォーターフォール効果を実現する
  • jsはウォーターフォールフローのボトムアウトによるデータの動的ロードを実現します
  • ウォーターフォールフローレイアウト(無限読み込み)を実現する js
  • JavaScript でウォーターフォールレイアウトを実装する 3 つの方法
  • JavaScript ウォーターフォールフローを実装する方法を学びましたか?

<<:  MySQL を使用して Excel でデータ生成を完了する方法

>>:  リモート Linux システムでポートが開いているかどうかを確認する 3 つの方法

推薦する

設計仕様に準拠した設計は良い設計でしょうか?

これまでの数年間、私はいわゆる「設計仕様」についてかなりの数の執筆やコンサルティングを行ってきました...

Idea の起動速度を改善し、Tomcat ログの文字化けを解決する方法

目次序文アイデアの起動速度Tomcat ログが文字化けしている序文Idea を再インストールしたので...

Element-uiはテーブル内のセルを直接クリックして編集します

目次成果を達成する実装コード最近、会社でelementUIを使い始めたため、開発の過程でテーブルのセ...

VMware 構成 VMnet8 ネットワーク方法の手順

目次1. はじめに2. 設定手順1. はじめに1. NAT モード (VMnet8) は、仮想マシン...

MySQLデータを復元する2つの方法

1. はじめに少し前、開発者がテスト環境や本番環境で誤った操作をし、データベースを誤って削除/更新し...

史上最もクリエイティブな404ページのデザインは、ウェブサイトのユーザーエクスペリエンスを効果的に向上させます

ウェブを閲覧しているときに 404 ページに遭遇することはあまりないので、見落としがちです。しかし、...

JavaScript のクロージャの問題の詳細な説明

クロージャは、純粋関数型プログラミング言語の伝統的な機能の 1 つです。クロージャをコア言語構造の不...

MySQLでデータを削除してもディスク領域が解放されないのはなぜですか

目次問題の説明解決問題分析問題の説明MySQL で delete ステートメントを使用してデータを削...

Vue における v-model を使用したクロスコンポーネントバインディングの基本的な実装方法

みなさんこんにちは。今日はv-modelを使って親子コンポーネントのバインディング効果を実現する方法...

Alibaba Cloud Serverにプログラムをデプロイし、ドメイン名を使用して直接アクセスする方法の詳細な説明

何もすることがなかったので、学習用に最も安いAlibaba Cloudサーバーを購入しました。年間3...

ElementUI el-select の過剰なデータに対する解決策についての簡単な説明

目次1. シナリオの説明2. 解決策オプションが多すぎる el-select コンポーネントの解決策...

HTML の POST リクエストにおける a タグの 2 つの使用法の分析

HTML POST リクエストで a タグを使用する 2 つの例を次に示します。 1. ajaxを使...

77.9K の GitHub リポジトリを持つ Axios プロジェクト: 学ぶ価値のあることは何でしょうか?

目次序文1. Axiosの紹介2. HTTPインターセプターの設計と実装2.1 インターセプターの紹...

JavaScript+html はフロントエンドページでランダム QR コード検証を実装します

クールなフロントエンドページのランダムQRコード検証を参考までに共有します。具体的な内容は次のとおり...

Windows Server 2016 でサービスを展開する方法 (グラフィック チュートリアル)

導入インストールするシステムの数が多い場合、USB フラッシュ ドライブまたは CD を使用した手動...