ウォーターフォールフローレイアウト(無限読み込み)を実現する 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 文の概要

推薦する

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

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

TypeScript の関数

目次1. 関数の定義1.1 JavaScript の関数1.2 TypeScriptの関数2. オプ...

Vueテクノロジーに基づく再帰コンポーネントの実装方法

説明するこの記事では、Vue テクノロジーに基づいて再帰コンポーネントを実装する方法を紹介します。 ...

tomcatでcatalina.outログをカットする3つの方法の詳細な説明

1. ログセグメンテーションのためのLog4j 1) log4j-1.2.17.jar、tomcat...

Win10 VM 仮想マシンに Mac OS10.14 を完璧にインストールする (グラフィック チュートリアル)

最近、Apple の記者会見を見てとても興奮したので、Mac システムを体験して Apple の素晴...

Vue Element フロントエンドアプリケーション開発 従来の Element インターフェースコンポーネント

目次1. リストインターフェースとその他のモジュールの表示処理2. 従来のインターフェースコンポーネ...

読み込み進捗バーのネイティブ JS 実装

この記事では、ネイティブ JS によって実装された動的読み込みプログレス バーの特殊効果を紹介します...

ページ内にマーキーとフラッシュが共存する場合の競合解決

競合の主な症状は、FLASH ボタンがジャンプし続け、不安定になり、Web ページの外観と通常のアク...

mysql ルートユーザーを認証できず、Navicat リモート認証プロンプト 1044 の問題を解決します

まず解決策を見てみましょう #------------mysql の root ユーザーに権限を付与...

フロントエンドの上級者向けコースでは、JavaScript のストレージ機能の使い方を学習します。

目次序文背景実施計画の考え方js ストレージ機能ソリューション設計やっと要約する序文どの SaaS ...

MySQL 5.7.18 のインストール中に MySQL サービスの起動に失敗する問題の解決策

MySQL は非常に強力なリレーショナル データベースです。しかし、初心者の中には、インストールや設...

MySQL 5.7 共通データ型

——「MySQL in Simple Terms (第 2 版)」からのメモ数値型整数型バイト最小最...

Bootstrap 3.0 の特殊効果の学習ノート(表示と非表示、フローティングの除去、閉じるボタンなど)

この記事の主な内容は次のとおりです。 1. 閉じるボタン2.キャレット3. フローティングを素早く設...

JavaScript の Set データ構造の詳細な説明

目次1. セットとは何か2. セットコンストラクタ2.1) 配列2.2) 文字列2.3) 議論2.4...