js實(shí)現(xiàn)瀑布流布局（無(wú)限加載）
本文實(shí)例為大家分享了js實(shí)現(xiàn)瀑布流布局的具體代碼，供大家參考，具體內(nèi)容如下
1.實(shí)現(xiàn)瀑布流布局思路
準(zhǔn)備好數(shù)據(jù)之后
. 綁定滾動(dòng)事件. 判斷頁(yè)面是否到底（滾動(dòng)的距離+可是區(qū)域的高度 == 最后一個(gè)元素的top）. 加載新數(shù)據(jù)，渲染新頁(yè)面.重新執(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='http://www.cgvv.com.cn/bcjs/data/data.js'></script> <script> // W1. 準(zhǔn)備數(shù)據(jù) // W2. 綁定滾動(dòng)事件 // W3. 判斷頁(yè)面是否到底（滾動(dòng)的距離+可是區(qū)域的高度 == 最后一個(gè)元素的top） // W4. 加載新數(shù)據(jù)，渲染新頁(yè)面 // 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. 獲取所有元素的高度，存起來(lái) 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='http://www.cgvv.com.cn/imgs/4.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/2.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/3.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/5.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/1.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/6.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/7.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/8.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/9.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/10.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/4.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/2.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/3.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/5.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/1.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/6.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/7.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/8.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/9.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/10.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/4.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/2.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/3.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/5.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/1.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/6.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/7.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/8.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/9.jpg' alt=''> </div> </div> <div class='box'> <div class='imgbox'> <img src='http://www.cgvv.com.cn/imgs/10.jpg' alt=''> </div> </div> </div></body></html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. vue使用moment如何將時(shí)間戳轉(zhuǎn)為標(biāo)準(zhǔn)日期時(shí)間格式2. bootstrap select2 動(dòng)態(tài)從后臺(tái)Ajax動(dòng)態(tài)獲取數(shù)據(jù)的代碼3. js select支持手動(dòng)輸入功能實(shí)現(xiàn)代碼4. php redis setnx分布式鎖簡(jiǎn)單原理解析5. 《Java程序員修煉之道》作者Ben Evans：保守的設(shè)計(jì)思想是Java的最大優(yōu)勢(shì)6. CSS3中Transition屬性詳解以及示例分享7. Python數(shù)據(jù)相關(guān)系數(shù)矩陣和熱力圖輕松實(shí)現(xiàn)教程8. 如何在PHP中讀寫文件9. java加載屬性配置properties文件的方法10. 什么是Python變量作用域
網(wǎng)公網(wǎng)安備