今天早起看了慕課的瀑布流，的確講的十分詳細，也十分的好，我在博客里也就只能給代碼加些注釋，和說一下思路。建議大家去看一下慕課的瀑布流教程，非常詳細，每一個細節都講的非常好，只要懂JS的基礎代碼，看起來應該不是多大問題，里面沒有太難得方法，但自己寫不出來還是因為思路上有問題，下面就詳細說一下幾個重點方法的代碼，建議大家去慕課詳細學習
HTML 和CSS沒有太難得地方
<div id="main">//一個main包含了整個頁面內容，box用來做一個外容器，img作為圖片容器 <div class="box"> <div class="pic"> <img src="img/0.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="img/0.jpg"> </div> </div> <div>
//CSS //這里面的填充用padding值，因為offsetHeight是包括一個padding而不包括margin的方便以后高度的測量*{ margin: 0px; padding: 0px;}#main{ position: relative;//在main上設置相對定位，在JS給box設置絕對定位，來控制圖片位置}.box{ padding: 15px 0 0 15px; float: left;}.pic{ padding: 10px; border: 1px solid #ccc; border-radius:5px; box-shadow: 0 0 5px #ccc;}.pic img{ width: 168px;//瀑布流統一寬度但不同一高度，高度為自適應就好 height: auto;}JS代碼
在我們寫JS代碼之前，我們需要搞明白我們需要什么方法，是否需要封裝起來調用，我們第一步要干什么，
那么我們第一步要干什么呢？我們做瀑布流首先要做的是獲取到所有小部件也就是box，我們無論做什么處理都是對box的處理或者img的處理，所以要獲取到所有的box，所以我們可以把它封裝起來
//根據class獲取元素function getByClass(parent,clsName){//傳入父元素和想要的class var boxArr=new Array//用來存儲獲取到所有class為box的元素，可以用對象的方式也可以用[]創建 oElements=parent.getElementsByTagName('*');//取出所有子元素 for (var i = 0; i < oElements.length; i++) {//我們需要遍歷所有的子元素 if(oElements[i].className==clsName)//如果我們找到了相應的子元素 boxArr.push(oElements[i]);//取出傳過來相等的className //push是數組自帶的方法 }; return boxArr;返回數組} 這樣我們就得到了我們想要的class，之后該怎么辦呢，先從一個box下手，我們需要取得第一排到底有多少個元素，因為之前我們并沒有確定我們main的寬度，所以是自適應的也就是說我們把頁面縮小，我們每一排的元素也會相應的減少，為了能讓瀑布流的代碼有更好的應用性，讓不同尺寸的圖片都可以應用，所以，我們需要手動計算一排究竟可以放多少張圖片呢，那如何計算呢？
我們可以算出頁面總寬在box的寬，就OK了
var oBoxW=oBoxs[0].offsetWidth;//box的寬，提到了里面計算了padding的值
var clos=Math.floor(document.documentElement.clientWidth/oBoxW)//求列數
這樣我們就求出了列數，無論圖片的寬度如何變，我們都可以算出來
floor是用來取整數的，因為我們的px是沒有浮點數類型的避免計算錯誤，所以取整
oparent.style.cssText='width:'+oBoxW*clos+'px; margin :0 auto';
設置main的寬度
我們已經取得了列數之后呢我們第一排的圖片肯定是一排寬度相等，長度不一是吧，也就是說，我們第二排的圖片需要接上第一排圖片的后邊，我們不能一排一排操作，但我們可以一個一個操作，怎么操作呢，我們可以取到第一排高度最小的將下一張圖片，也就是如果第一排7個，那下一個就是第八個，把第八個圖片放在最小高度的圖片上，如何實現呢，我們先試想一下，我們首先需要求出第一排中最小，我們有一個Math.min求最小，但是呢我們這個函數無法傳入用數組，只能是具體的數怎么半呢，apply來擴展作用域
用代碼展示下
var hArr=[];//每一列高度的值 for (var i = 0; i < oBoxs.length; i++) { if(i<clos){//先記錄好第一排高度 hArr.push(oBoxs[i].offsetHeight);//放進去 }else{//如果到達第二排，就開始計算 var minH=Math.min.apply(Math,hArr);最小值計算 //為什么可以呢，本來不能傳數組，我們通過apply綁定作用域在Math上，也就是說還是執行這個函數但是，apply第二個參數需要是數組，所以間接地把參數變成了數組傳進去，也就是說我們還是用了Math函數但值變成了數組里的值。 //console.log(minH) var index=getMinhIndex(hArr,minH)//獲取索引 oBoxs[i].style.position="absolute";我們就可以找到，傳入數組和最小值 oBoxs[i].style.top=minH+"px";那下一張圖片的高度救球出來了 oBoxs[i].style.left=oBoxW*index+"px";左邊的距離就是索引乘以元素的寬 hArr[index]+=oBoxs[i].offsetHeight;//我們添加了一個圖片后需要刷新數組里的高度，再去尋找下一個最小的，再向他的下面添加圖片，一次循環 } };function getMinhIndex (arr,val){ for(var i in arr){//在其中找到最小值，返回索引 if(arr[i]==val){ return i; } }}以上就大體做出了一個瀑布流的樣式，就差拖動滾動條加載了，這里面肯定需要后臺的支持，在慕課上，老師做了一個偽處理，這里建議看慕課視頻，有圖解十分清楚，我用語言或圖片不太好表達
var dataInt={"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'}]}//我們自己寫一個json數據 window.onscroll=function(){ if(checkScrollSlide){ var oparent=document.getElementById("main") //將數據快渲染到當前頁面尾部 for (var i = 0; i < dataInt.data.length; i++) {//添加 var oBox=document.createElement("div"); oBox.className="box"; oparent.appendChild(oBox); var opic=document.createElement('div'); opic.className='pic'; oBox.appendChild(opic); var oimg=document.createElement('img'); oimg.src='img/'+dataInt.data[i].src;//將數據加進去 opic.appendChild(oimg) } waterfall('main','box');//一會看完整代碼，這就是剛才那些的封裝 } } function checkScrollSlide(){//檢測是否具備加載數據塊的條件 var oparent=document.getElementById('main'); var oBoxs=getByClass(oparent,'box') var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2)求出最后一個圖片的一半距離頁面頂端的距離 var scrollTop=document.body.scrollTop||document.documentElement.scrollTop; var height=document.body.clientHeight||document.documentElement.clientHeight; return(lastBoxH<scrollTop+height)?true:false;//如果頁面距離頂部（包括滾輪）的距離比滾輪加頁面距離小，那么就返回true}完整JS代碼
window.onload=function(){ waterfall('main','box'); //json var dataInt={"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'}]} window.onscroll=function(){ if(checkScrollSlide){ var oparent=document.getElementById("main") //將數據快渲染到當前頁面尾部 for (var i = 0; i < dataInt.data.length; i++) { var oBox=document.createElement("div"); oBox.className="box"; oparent.appendChild(oBox); var opic=document.createElement('div'); opic.className='pic'; oBox.appendChild(opic); var oimg=document.createElement('img'); oimg.src='img/'+dataInt.data[i].src; opic.appendChild(oimg) } waterfall('main','box'); } }}function waterfall(parent,box){ //將main下所有class為box的元素取出來 var oparent=document.getElementById(parent); var oBoxs=getByClass(oparent,box) //console.log(oBox.length) //計算整個頁面的列數（頁面寬/box寬） var oBoxW=oBoxs[0].offsetWidth; //console.log(oBoxW); var clos=Math.floor(document.documentElement.clientWidth/oBoxW)//求列數 //console.log(clos) //設置main的寬 oparent.style.cssText='width:'+oBoxW*clos+'px; margin :0 auto'; var hArr=[];//每一列高度的值 for (var i = 0; i < oBoxs.length; i++) { if(i<clos){ hArr.push(oBoxs[i].offsetHeight); }else{ var minH=Math.min.apply(Math,hArr); //console.log(minH) var index=getMinhIndex(hArr,minH)//索引 oBoxs[i].style.position="absolute"; oBoxs[i].style.top=minH+"px"; oBoxs[i].style.left=oBoxW*index+"px"; hArr[index]+=oBoxs[i].offsetHeight;//更改數組 } }; //console.log(hArr)}//根據class獲取元素function getByClass(parent,clsName){ var boxArr=new Array//用來存儲獲取到所有class為box的元素 oElements=parent.getElementsByTagName('*');//取出所有子元素 for (var i = 0; i < oElements.length; i++) { if(oElements[i].className==clsName) boxArr.push(oElements[i]);//取出傳過來相等的className }; return boxArr;}function getMinhIndex (arr,val){ for(var i in arr){ if(arr[i]==val){ return i; } }}function checkScrollSlide(){//檢測是否具備加載數據塊的條件 var oparent=document.getElementById('main'); var oBoxs=getByClass(oparent,'box') var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2) var scrollTop=document.body.scrollTop||document.documentElement.scrollTop; var height=document.body.clientHeight||document.documentElement.clientHeight; return(lastBoxH<scrollTop+height)?true:false;}我的瀑布流圖
以上所述是小編給大家介紹的JS原生瀑布流效果實現詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！
新聞熱點
疑難解答
