js to achieve waterfall flow layout (infinite loading)

This article example shares the specific code of js to implement waterfall flow layout for your reference. The specific content is as follows

1. Implement waterfall flow layout ideas

After preparing the data

. Bind scroll events
. Determine whether the page has reached the bottom (scroll distance + height of the area == top of the last element)
. Load new data and render new page
.Re-execute the waterfall effect

2. Code (can be run directly after changing the image path)

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .cont{margin: 0 auto;background: #ccc;position: relative;}
 .cont::after{content: "";display: block;clear: both;}

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

 .imgbox{border: solid 1px black;padding: 6px;border-radius: 6px;}
 
 .imgbox img{width: 200px;display: block;}
 </style>
 <script src="data/data.js"></script>
 <script>
 // W1. Prepare data // W2. Bind scroll events // W3. Determine whether the page has reached the bottom (scroll distance + height of the scroll area == top of the last element)
  // W4. Load new data and render new page // W5. Re-execute waterfall effect onload = function(){
  new Waterfall;
 }
 class Waterfall{
  constructor(){
  // 1. Select elements this.box = document.querySelectorAll(".box");
  this.cont = document.querySelector(".cont");
  this.clientH = document.documentElement.clientHeight;
  this.heightArr = [];
  // 2. Complete the layout this.init();
  this.addEvent();
  }
  addEvent(){
  var that = this;
  onscroll = function(){
   var scrollT = document.documentElement.scrollTop;
   if (that.clientH + scrollT > that.scrollH - 300) {
   that.render()
   }
  }
  }
  render(){
  for(var i=0;i<data.length;i++){
   var img = document.createElement("img")
   img.src = data[i].src;
   var imgbox = document.createElement("div")
   imgbox.className = "imgbox";
   var box = document.createElement("div")
   box.className = "box";
   imgbox.appendChild(img);
   box.appendChild(imgbox);
   this.cont.appendChild(box);
  }
  // Initialize all this.box = document.querySelectorAll(".box");
  this.heightArr = [];
  // Re-render the waterfall structure this.firstLine();
  this.otherLine();
  }
  init(){
  // Calculate the maximum number of cells that can fit in a row, and then calculate the maximum width 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. Distinguish the first line this.firstLine()
  // 4. Distinguish other lines this.otherLine();
  }
  firstLine(){
  // 5. Get the height of all elements and save them for(var i=0;i<this.maxNum;i++){
   this.heightArr.push(this.box[i].offsetHeight);
  }
  }
  otherLine(){
  for(var i=this.maxNum;i<this.box.length;i++){
   // 6. Get all the heights of the first row // console.log(this.heightArr)
   // Calculate the minimum value and index of the minimum value // 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);
   // console.log(minIndex);
   // 7. Set the element's positioning this.box[i].style.position = "absolute";
   // 8. Set the top and left of the element
   this.box[i].style.top = min + "px";
   this.box[i].style.left = minIndex * this.boxW + "px";
   // 9. Modify the minimum value this.heightArr[minIndex] += this.box[i].offsetHeight;
  }
  this.scrollH = document.documentElement.scrollHeight;
  }
 }
 function getMin(arr){
  // First intercept the array (for deep copy)
  // Then sort the intercepted new array // Find the 0th position // Return return arr.slice(0).sort((a,b)=>ab)[0];
 }
 
 </script>
</head>
<body>
 <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>
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: