2. 程式人生 > 程式設計 >js實現瀑布流佈局（無限載入）

js實現瀑布流佈局（無限載入）

阿新 • • 發佈：2021-03-16

本文例項為大家分享了js實現瀑布流佈局的具體程式碼，供大家參考，具體內容如下

1.實現瀑布流佈局思路

準備好資料之後

. 繫結滾動事件
. 判斷頁面是否到底（滾動的距離+可是區域的高度 == 最後一個元素的top）
. 載入新資料，渲染新頁面
.重新執行瀑布流效果

2.程式碼（更換圖片路徑之後可直接執行）

<!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="jCRvxKFu
 
data/data.js"></script>
 <script>
 // W1. 準備資料
 // W2. 繫結滾動事件
  // W3. 判斷頁面是否到底（滾動的距離+可是區域的高度 == 最後一個元素的top）
  // W4. 載入新資料，渲染新頁面
  // W5. 重新執行瀑布流效果
 onload = function(){
  new Waterfall;
 }
 classwww.cppcns.com Waterfall{
  constructor(){
  // 1.選擇元素
  this.box = document.querySelectorAllhttp://www.cppcns.com
 
(".box");
  this.cont = document.querySelector(".cont");
  this.clientH = document.documentElement.clientHeight;
  this.heightArr = [];
  // 2.補全佈局
  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 = [];
  // 重新渲染瀑布流結構
  this.firstLine();
  this.otherLine();
  }
  init(){
  // 計算一行最多能放幾個，再計算最大寬度
  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();
  }
  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)
   // 計算最小值和最小值的索引
   // 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. 設定元素的定位
   this.box[i].style.position = "absolute";
   // 8. 設定元素的top和left
   this.box[i].style.top = min + "px";
   this.box[i].style.left = minIndex * this.boxWhttp://www.cppcns.com
 
 + "px";
   // 9. 修改最小值
   this.heightArr[minIndex] += this.box[i].offsetHeight;
  }
  this.scrollH = document.documentElement.scrollHeight;
  }
 }
 function getMin(arr){
  // 先對陣列進行擷取（為了深拷貝）
  // 然後對截取出的新陣列排序
  // 找第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="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/2.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/3.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/5.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/1.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/6.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/7.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/8.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/9.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/10.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/4.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/2.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/3.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/5.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/1.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/6.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/7.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/8.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/9.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/10.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/4.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/2.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box程式設計客棧">
  <div class="imgbox">
  <img src="../imgs/3.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/5.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/1.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/6.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/7.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/8.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/9.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/10.jpg" alt="js實現瀑布流佈局（無限載入）">
  </div>
 </div>
 </div>
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

相關推薦

js實現瀑布流佈局（無限載入）

本文例項為大家分享了js實現瀑布流佈局的具體程式碼，供大家參考，具體內容如下

flex實現瀑布流佈局並實現從左到右排序（order）

flex結合order實現從左到右的瀑布流 這種方式可以做到先從左到右，再從上到下顯示

JS實現瀑布流效果

本文例項為大家分享了JS實現瀑布流效果的具體程式碼，供大家參考，具體內容如下

原生js實現瀑布流效果

本文例項為大家分享了js實現瀑布流效果的具體程式碼，供大家參考，具體內容如下

原生js實現瀑布流

前言： 　　這玩意兒大家肯定經常見到，但是應該怎麼實現的呢？現在列出來三種方式

實現瀑布流佈局

瀑布流佈局 原生js實現瀑布流 實現思路： 父元素設定相對定位，子元素設定絕對定位

JavaScript實現瀑布流佈局的3種方式

前言 今天逛閒魚的時候觀察到每一行的高度不是相同的，經瞭解才知道原來這是一種瀑布流佈局，感覺挺有意思，於是決定研究一下，在網上也找了一些方案，實現瀑布流大概有3種方式。

【js】js實現瀑布流

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">

微信小程式實現瀑布流分頁滾動載入

本文例項為大家分享了微信小程式實現瀑布流分頁滾動載入的具體程式碼，供大家參考，具體內容如下

實現瀑布流佈局的三種方式

前言 今天逛閒魚的時候觀察到每一行的高度不是相同的，經瞭解才知道原來這是一種瀑布流佈局，感覺挺有意思，於是決定研究一下，在網上也找了一些方案，實現瀑布流大概有3種方式。

JS實現簡易留言板（節點操作）

本文例項為大家分享了JS實現簡易留言板的具體程式碼，供大家參考，具體內容如下

vue.js實現h5機器人聊天（測試版）

本文例項為大家分享了vue.js實現h5機器人聊天的具體程式碼，供大家參考，具體內容如下

js實現貪吃蛇遊戲（簡易版）

本文例項為大家分享了js實現貪吃蛇遊戲的具體程式碼，供大家參考，具體內容如下

瀑布流佈局 不到30行程式碼實現（JavaScript + absolute）支援懶載入

@ 目錄 前言 一、使用css實現瀑布流佈局 1.flex 佈局 2.column-count 多欄佈局 3.grid 網格佈局

js瀑布流佈局的實現

本文例項為大家分享了js實現瀑布流佈局的具體程式碼，供大家參考，具體內容如下

純css實現瀑布流（multi-column多列及flex佈局）

瀑布流的佈局自我感覺還是很吸引人的，最近又看到實現瀑布流這個做法，在這裡記錄下，特別的，感覺flex佈局實現瀑布流還是有點懵的樣子，不過現在就可以明白它的原理了

如何用JS實現網頁瀑布流佈局

前言： 瀑布流 又稱瀑布流式佈局，是比較流行的一種網站頁面佈局方式。即多行等寬元素排列，後面的元素依次新增到其後，等寬不等高，根據圖片原比例縮放直至寬度達到我們的要求，依次按照規則放入指定位置。

vue實現簡單瀑布流佈局

vue簡單實現瀑布流佈局的一種方式（vue瀑布流元件），供大家參考，具體內容如下

vue實現瀑布流元件滑動載入更多

建議先看vue瀑布流元件上拉載入更多再來食用本文，如果直接想看原始碼文末就是~

淺析瀑布流佈局原理及實現方式

一、瀑布流 　　瀑布流佈局有一個專業的英文名稱Masonry Layouts。瀑布流佈局已經有好多年的歷史了，我最早知道這個名詞的時候大約是在2012年，當時Pinterest網站的佈局就是使用的這種流式佈局，簡言之像Pinterest網