ウォーターフォールフローレイアウト（無限読み込み）を実現する 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 を応援していただければ幸いです。

以下もご興味があるかもしれません: