ウォーターフォールフローレイアウト(無限読み込み)を実現する js

ウォーターフォールフローレイアウト(無限読み込み)を実現する js

この記事の例では、ウォーターフォールフローレイアウトを実装するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

1. ウォーターフォールフローレイアウトのアイデアを実装する

データを準備した後

スクロールイベントをバインドする
ページの下部に到達したかどうかを判断します(スクロール距離 + 領域の高さ == 最後の要素の上部)
新しいデータを読み込み、新しいページをレンダリングします
ウォーターフォール効果を再実行する

2. コード(画像パスを変更した後、直接実行できます)

<!DOCTYPE html>
<html>
<ヘッド>
 <メタ文字セット="UTF-8">
 <title>ドキュメント</title>
 <スタイル>
 .cont{マージン: 0 自動;背景: #ccc;位置: 相対;}
 .cont::after{content: "";display: block;clear: both;}

 .box{float: 左;padding: 6px;}

 .imgbox{境界線: 実線 1px 黒;パディング: 6px;境界線の半径: 6px;}
 
 .imgbox img{幅: 200px;表示: ブロック;}
 </スタイル>
 <script src="data/data.js"></script>
 <スクリプト>
 // W1. データを準備する // W2. スクロール イベントをバインドする // W3. ページが下部に到達したかどうかを判断します (スクロール距離 + スクロール領域の高さ == 最後の要素の上部)
  // W4. 新しいデータを読み込み、新しいページをレンダリングします // W5. ウォーターフォール効果を再実行します onload = function(){
  新しい滝;
 }
 クラス Waterfall{
  コンストラクタ(){
  // 1. 要素を選択する this.box = document.querySelectorAll(".box");
  this.cont = document.querySelector(".cont");
  ドキュメント要素のクライアント高さを設定します。
  this.heightArr = [];
  // 2. レイアウトを完成させる this.init();
  イベントを追加します。
  }
  イベントを追加します(){
  var that = this;
  onscroll = 関数(){
   var scrollT = document.documentElement.scrollTop;
   if (that.clientH + scrollT > that.scrollH - 300) {
   .render() を使う
   }
  }
  }
  与える(){
  for(var i=0;i<data.length;i++){
   var img = document.createElement("img")
   データファイル
   var imgbox = document.createElement("div")
   imgbox.className = "imgbox";
   var ボックス = document.createElement("div")
   box.className = "ボックス";
   imgbox.appendChild(画像);
   box.appendChild(画像ボックス);
   this.cont.appendChild(ボックス);
  }
  // すべてを初期化します this.box = document.querySelectorAll(".box");
  this.heightArr = [];
  // ウォーターフォール構造を再レンダリングします this.firstLine();
  this.otherLine();
  }
  初期化(){
  // 行に収まるセルの最大数を計算し、最大幅を計算します。this.clientW = document.documentElement.clientWidth;
  this.boxW = this.box[0].offsetWidth;
  this.maxNum = parseInt(this.clientW / this.boxW)
  this.cont.style.width = this.boxW * this.maxNum + "px";

  // 3. 最初の行を区別する this.firstLine()
  // 4. 他の行を区別する this.otherLine();
  }
  最初の行(){
  // 5. すべての要素の高さを取得して保存します for(var i=0;i<this.maxNum;i++){
   this.heightArr.push(this.box[i].offsetHeight);
  }
  }
  その他の行(){
  for(var i=this.maxNum;i<this.box.length;i++){
   // 6. 最初の行の高さをすべて取得する // console.log(this.heightArr)
   // 最小値と最小値のインデックスを計算します // var min = getMin(this.heightArr);
   // var min = Math.min.apply(null,this.heightArr);
   var min = Math.min(...this.heightArr);
   var minIndex = this.heightArr.indexOf(min);
   // コンソールログ(minIndex);
   // 7. 要素の位置を設定する this.box[i].style.position = "absolute";
   // 8. 要素の上端と左端を設定する
   this.box[i].style.top = min + "px";
   this.box[i].style.left = minIndex * this.boxW + "px";
   // 9. 最小値を変更する this.heightArr[minIndex] += this.box[i].offsetHeight;
  }
  ドキュメントのスクロールの高さを設定します。
  }
 }
 関数 getMin(arr){
  // まず配列をインターセプトします(ディープコピー用)
  // 次に、インターセプトした新しい配列をソートします // 0 番目の位置を検索します // 戻り値 return arr.slice(0).sort((a,b)=>ab)[0];
 }
 
 </スクリプト>
</head>
<本文>
 <div class="cont">
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/4.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/2.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/3.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/5.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/1.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/6.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/7.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/8.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/9.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/10.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/4.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/2.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/3.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/5.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/1.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/6.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/7.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/8.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/9.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/10.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/4.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/2.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/3.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/5.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/1.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/6.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/7.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/8.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/9.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/10.jpg" alt="">
  </div>
 </div>
 </div>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

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

<<:  Dockerfile を使用して Docker でイメージを構築する方法

>>:  テーブルの作成、フィールドの追加、フィールドの変更、インデックスの追加によく使用される MySQL の SQL 文の概要

推薦する

MySQLが2つのテーブルを関連付ける際のエンコードの問題と解決策

Mysqlが2つのテーブルを関連付けると、次のエラーメッセージが生成されます:照合順序の不正な組み合...

DELL R730 サーバーの構成 RAID とインストール サーバー システムとドメイン制御の詳細なグラフィック チュートリアル

最近、会社で DELL R730 サーバーを購入したのですが、偶然次のチュートリアルを見つけたので、...

VMware 仮想化 KVM のインストールと展開のチュートリアルの概要

仮想化1. 環境セントオス7.3 selinuxとファイアウォールを無効にする2. 仮想化環境の構成...

Nginx の realip モジュールの使い方の基礎学習

序文nginx モジュールには、公式とサードパーティの 2 種類があります。nginx のインストー...

Centos7 での MySQL 5.7.20 のインストールと設定に関する詳細なチュートリアル

1. 公式 Web サイトから MySQL 5.7 インストール パッケージ (mysql-5.7....

擬似静的およびクライアント適応型 Nginx の設定方法

バックエンドは thinkphp3.2.3 フレームワークを使用します。他の言語を使用している場合は...

バージョン管理ツール Rational ClearCase の紹介

Rational ClearCase は、コードやその他のソフトウェア開発資産のバージョン管理を実...

4つのファイル拡張子 .html、.htm、.shtml、.shtm の違い

ウェブページを作り始めたばかりの友人の多くは、拡張子が非常に多いことに気づきます。実際、htm と ...

Linux ファイル管理コマンド例の分析 [権限、作成、削除、コピー、移動、検索など]

この記事では、Linux ファイル管理コマンドについて例を挙げて説明します。ご参考までに、詳細は以下...

Centos に PHP7.4 と Nginx をインストールする方法

準備する1. 必要なインストールパッケージをダウンロードするhttps://www.php.net/...

JavaScript のよりエレガントなエラー処理方法 async await

目次背景なぜエラー処理が必要なのでしょうか? async await より適切なエラー処理まとめ要約...

MySQL 8.x msi バージョンのインストール チュートリアル (画像とテキスト付き)

1. MySQLをダウンロードする公式サイトのダウンロードアドレス https://dev.mys...

CSS3はさまざまな境界効果を実現します

半透明の境界線結果: 実装コード: <div> 半透明の境界線が見えますか? </...

Vue で wangeditor リッチテキスト編集を使用する際の問題

wangEditor は、JavaScript と CSS に基づいて開発された Web リッチ テ...

ラジオボタンと複数選択ボタンは画像を使用してスタイル設定されます

ラジオ ボタンや複数選択ボタンにスタイルを追加する方法や、ボタンを大きくする方法を尋ねる人を以前見か...