先科普下瀑布流吧
瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊并附加至當前尾部。最早采用此布局的網站是Pinterest，逐漸在國內流行開來。國內大多數清新站基本為這類風格，像美麗說、淘寶網都有使用。
這是我實現的一個效果，就是怎么滾動都加載不玩。就跟瀑布一樣流啊流！
這里的實現方式我們只說Js實現方法
實現原理：
對容器中已有數據塊元素進行第一次計算1 容器總寬度 2 列寬度 3 最小列數 ，得到列數后，用一個數組存放盒子所有高度，找出最小高度。之后根據序列號更新高度；看著有些拗口，實現起來就很簡單了。
對于滾動加載：即滾動到哪個高度后，需要去加載數據，其實這個就是列的最小高度值，這樣當前滾動值和最小高度值比較一下即可判斷出來，是否要觸發加載數據；就是寫一個函數，用來判斷是否達到加載圖片條件，如果達到，就開始加載。比如獲得最后一張圖片的offsetTop,可視區高度,滾動距離,也就是當圖片的offsetTop小于可視區高度和滾動距離之和的情況下，此時就應該加載了，不過條件可以隨便定，也可以等滾動到圖片的一半時候在觸發加載條件,如圖所示:
先上HTML CSS代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>waterfall</title> <script src="script.js"></script> <style> * { margin: 0; padding: 0; } body { background: yellow; } #container { } #container .pin { padding-left: 15px; padding-top: 15px; float: left; } #container .div-box { float: left; border: 1px solid #ccc; box-shadow: 0 0 5px #bbb; background: #fff; padding: 12px; border-radius: 9px; } #container .div-box img { width: 300px; } #container .div-box p { text-align: center; font-size: 20px; font-weight: bold; color: red; } </style> <script> </script></head><body> <div id="container"> <div class="pin"> <div class="div-box"> <img src="img/1.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/2.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/3.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/4.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/5.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/6.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/7.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/8.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/9.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/10.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/1.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/2.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/3.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/4.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/5.jpg" alt=""> <p>白超華-博客園</p> </div> </div> <div class="pin"> <div class="div-box"> <img src="img/6.jpg" alt=""> <p>白超華-博客園</p> </div> </div> </div></body></html>JS代碼，每行都有注釋
window.onload = function(){ var data = { //模擬后臺數據 的一個JSON格式的文件 "data":[ {"src":"1.jpg"}, {"src":"2.jpg"}, {"src":"3.jpg"}, {"src":"4.jpg"}, {"src":"5.jpg"}, ] }; window.onscroll = function(){ if(checkScroll()){ //判斷是否具備滾動加載得條件 var oParent = document.getElementById('container'); for(var i=0; i<data.data.length; i++){ var div1 = document.createElement('div'); //創建div元素 div1.className = 'pin'; //設置class oParent.appendChild(div1); var div2 = document.createElement('div');//創建div元素 div2.className = 'div-box'; div1.appendChild(div2); var imgs = document.createElement('img');//創建img元素 imgs.style.width = '300px'; imgs.src = 'img/'+data.data[i].src; //設置讀取路徑 div2.appendChild(imgs); var p = document.createElement('p');//創建p元素 p.innerHTML = '白超華-博客園'; div2.appendChild(p); } waterfall('container','pin'); //--注意 別忘了這句，當滾動時候就執行 } } waterfall('container','pin');}function waterfall(parent, box){ var oParent = document.getElementById(parent);//獲取父級對象 var aBox = getByClass(oParent,box);//獲取所有class為pin的盒子的集合 var boxWidth = aBox[0].offsetWidth;//獲取一個盒子的寬 var pageWidth = document.body.clientWidth||document.documentElement.clientWidth;//獲取可視區寬 var cols = Math.floor(pageWidth/boxWidth);//獲得列數 var arrH = [];//用于存放盒子的高 for(var i=0; i<aBox.length; i++){ if(i<cols){//當小于第一列個數的時候 arrH.push(aBox[i].offsetHeight); } else { var minH = Math.min.apply(null,arrH);//得到數組中盒字的最小高度minH; var index = getMinIndex(arrH,minH); aBox[i].style.position = 'absolute';//設置絕對定位 aBox[i].style.top = minH+'px';//設置top，就是最小高度 aBox[i].style.left = aBox[0].offsetWidth*index+'px';//設置left，就是一個盒子的寬*index索引數 arrH[index]+=aBox[i].offsetHeight; //更新新添加盒字后的列高 } }}//通過父級獲取classfunction getByClass(parent, classname){ var aClass = parent.getElementsByTagName('*'); var arr = []; for(var i=0; i<aClass.length; i++){ if(aClass[i].className == classname){ arr.push(aClass[i]); } } return arr;}//最小值的索引indexfunction getMinIndex(arr,val){ for( i in arr){ if(arr[i] == val){ return i; } }}//function checkScroll(){ var oParent = document.getElementById('container'); var aBox = getByClass(oParent,'pin'); var lastBoxHeight = aBox[aBox.length-1].offsetTop;// 當滾到到這個距離時候就開始加載 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//兼容的滾動距離 var documentHeight = document.documentElement.clientHeight; //頁面高度 if(lastBoxHeight<scrollTop+documentHeight){ return true; }}以上就是本文的全部內容，希望對大家的學習有所幫助。
新聞熱點
疑難解答
