JS原生瀑布流效果實現

2019-11-19 11:41:45

字體：大中小

來源：轉載

供稿：網友

今天早起看了慕課的瀑布流，的確講的十分詳細，也十分的好，我在博客里也就只能給代碼加些注釋，和說一下思路。建議大家去看一下慕課的瀑布流教程，非常詳細，每一個細節都講的非常好，只要懂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;}

我的瀑布流圖