js實(shí)現(xiàn)瀑布流布局(無限加載)

更新時(shí)間：2021年09月10日 15:33:56 作者：噢，我明白了

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)瀑布流布局，無限加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)瀑布流布局的具體代碼，供大家參考，具體內(nèi)容如下

1.實(shí)現(xiàn)瀑布流布局思路

準(zhǔn)備好數(shù)據(jù)之后

. 綁定滾動(dòng)事件
. 判斷頁面是否到底（滾動(dòng)的距離+可是區(qū)域的高度 == 最后一個(gè)元素的top）
. 加載新數(shù)據(jù)，渲染新頁面
.重新執(zhí)行瀑布流效果

2.代碼（更換圖片路徑之后可直接運(yùn)行）

<!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. 準(zhǔn)備數(shù)據(jù)
 // W2. 綁定滾動(dòng)事件
  // W3. 判斷頁面是否到底（滾動(dòng)的距離+可是區(qū)域的高度 == 最后一個(gè)元素的top）
  // W4. 加載新數(shù)據(jù)，渲染新頁面
  // W5. 重新執(zhí)行瀑布流效果
 onload = function(){
  new Waterfall;
 }
 class Waterfall{
  constructor(){
  // 1.選擇元素
  this.box = document.querySelectorAll(".box");
  this.cont = document.querySelector(".cont");
  this.clientH = document.documentElement.clientHeight;
  this.heightArr = [];
  // 2.補(bǔ)全布局
  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);
  }
  // 初始化所有
  this.box = document.querySelectorAll(".box");
  this.heightArr = [];
  // 重新渲染瀑布流結(jié)構(gòu)
  this.firstLine();
  this.otherLine();
  }
  init(){
  // 計(jì)算一行最多能放幾個(gè)，再計(jì)算最大寬度
  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. 區(qū)分第一行
  this.firstLine()
  // 4. 區(qū)分其他行
  this.otherLine();
  }
  firstLine(){
  // 5. 獲取所有元素的高度，存起來
  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. 拿到第一行所有的高度
   // console.log(this.heightArr)
   // 計(jì)算最小值和最小值的索引
   // 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. 設(shè)置元素的定位
   this.box[i].style.position = "absolute";
   // 8. 設(shè)置元素的top和left
   this.box[i].style.top = min + "px";
   this.box[i].style.left = minIndex * this.boxW + "px";
   // 9. 修改最小值
   this.heightArr[minIndex] += this.box[i].offsetHeight;
  }
  this.scrollH = document.documentElement.scrollHeight;
  }
 }
 function getMin(arr){
  // 先對(duì)數(shù)組進(jìn)行截取（為了深拷貝）
  // 然后對(duì)截取出的新數(shù)組排序
  // 找第0位
  // 返回出去
  return arr.slice(0).sort((a,b)=>a-b)[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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: