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 つの方法

推薦する

vscodeを使用してuniappを開発する方法

私はフロントエンド プロジェクトの開発に常に vscode を使用してきたため、現在ではいくつかの小...

MySQL ステートメントの配置と概要の紹介

SQL (Structured Query Language) ステートメント、つまり構造化クエリ言...

JavaScript と CSS を最適化してウェブサイトのパフォーマンスを向上させる

<br /> 第 1 部と第 2 部では、Web サイトのパフォーマンス、ページ コンテ...

ORM モデル フレームワークを使用して MySQL データベースを操作する方法

ORM とは何ですか? ORM は Object Relational Mapping の略で、オブ...

TypeScript 2.0 マーク付き共用体型の詳細な説明

目次タグ付きユニオン型を使用した支払い方法の構築タグ付きユニオン型を使用した Redux アクション...

Windows 7 環境での Docker 高速ビルドと Alibaba Cloud コンテナ高速化構成の詳細な説明

前回の Docker に関する記事では、MAC システムでの構築について説明しました。この記事では、...

MySQL 5.7 のインストールと設定方法のグラフィックチュートリアル

このチュートリアルでは、MySQL 5.7のインストールと設定方法を参考までに紹介します。具体的な内...

uniapp エントリーレベル nvue クライミングピット記録の分析

目次序文こんにちは世界画像 境界線の半径を設定する実ピクセルを設定する外部CSSをインポートttfフ...

VueでTypescriptの設定手順を使用する

目次1. TypeScriptが古いVueプロジェクトに導入されるVue+Typescript プロ...

MySQL インデックス プッシュダウンを 5 分で理解する

目次インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックスプッ...

CSS の新機能には、コントロールページの再描画と再配置の問題が含まれています

新しい CSS プロパティ contain を紹介する前に、読者はページの再描画と再配置が何であるか...

位置のいくつかの巧妙な応用の詳細な説明:sticky スティッキーポジショニング

背景: position:sticky はスティッキー配置とも呼ばれます。スティッキー配置の要素は、...

UbuntuへのDocker CEのインストール

この記事は、Ubuntu 17.10 での Docker CE のインストールを記録するために使用さ...

LinuxでのMySQLのインストール手順

1. mysql tar ファイルをダウンロードします。参考: 2. インストールパッケージがあるデ...