//CSS
 //這里面的填充用padding值，因為offsetHeight是包括一個padding而不包括margin的方便以后高度的測量
*{
 margin: 0px;
 padding: 0px;
}
#main{
 position: relative;//在main上設(shè)置相對定位，在JS給box設(shè)置絕對定位，來控制圖片位置
}
.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;//瀑布流統(tǒng)一寬度但不同一高度，高度為自適應(yīng)就好
 height: auto;
}

JS代碼

在我們寫JS代碼之前，我們需要搞明白我們需要什么方法，是否需要封裝起來調(diào)用，我們第一步要干什么，
那么我們第一步要干什么呢？我們做瀑布流首先要做的是獲取到所有小部件也就是box，我們無論做什么處理都是對box的處理或者img的處理，所以要獲取到所有的box，所以我們可以把它封裝起來

//根據(jù)class獲取元素
function getByClass(parent,clsName){//傳入父元素和想要的class
 var boxArr=new Array//用來存儲獲取到所有class為box的元素，可以用對象的方式也可以用[]創(chuàng)建
 oElements=parent.getElementsByTagName('*');//取出所有子元素
 for (var i = 0; i < oElements.length; i++) {//我們需要遍歷所有的子元素
  if(oElements[i].className==clsName)//如果我們找到了相應(yīng)的子元素
   boxArr.push(oElements[i]);//取出傳過來相等的className
   //push是數(shù)組自帶的方法
 };
 return boxArr;返回數(shù)組
}

這樣我們就得到了我們想要的class，之后該怎么辦呢，先從一個box下手，我們需要取得第一排到底有多少個元素，因為之前我們并沒有確定我們main的寬度，所以是自適應(yīng)的也就是說我們把頁面縮小，我們每一排的元素也會相應(yīng)的減少，為了能讓瀑布流的代碼有更好的應(yīng)用性，讓不同尺寸的圖片都可以應(yīng)用，所以，我們需要手動計算一排究竟可以放多少張圖片呢，那如何計算呢？
我們可以算出頁面總寬在box的寬，就OK了

 var oBoxW=oBoxs[0].offsetWidth;//box的寬，提到了里面計算了padding的值
  var clos=Math.floor(document.documentElement.clientWidth/oBoxW)//求列數(shù)
  這樣我們就求出了列數(shù)，無論圖片的寬度如何變，我們都可以算出來
  floor是用來取整數(shù)的，因為我們的px是沒有浮點數(shù)類型的避免計算錯誤，所以取整
  oparent.style.cssText='width:'+oBoxW*clos+'px; margin :0 auto';
  設(shè)置main的寬度

我們已經(jīng)取得了列數(shù)之后呢我們第一排的圖片肯定是一排寬度相等，長度不一是吧，也就是說，我們第二排的圖片需要接上第一排圖片的后邊，我們不能一排一排操作，但我們可以一個一個操作，怎么操作呢，我們可以取到第一排高度最小的將下一張圖片，也就是如果第一排7個，那下一個就是第八個，把第八個圖片放在最小高度的圖片上，如何實現(xiàn)呢，我們先試想一下，我們首先需要求出第一排中最小，我們有一個Math.min求最小，但是呢我們這個函數(shù)無法傳入用數(shù)組，只能是具體的數(shù)怎么半呢，apply來擴展作用域
用代碼展示下

var hArr=[];//每一列高度的值
 for (var i = 0; i < oBoxs.length; i++) {
  if(i
以上就大體做出了一個瀑布流的樣式，就差拖動滾動條加載了，這里面肯定需要后臺的支持，在慕課上，老師做了一個偽處理，這里建議看慕課視頻，有圖解十分清楚，我用語言或圖片不太好表達
var dataInt={"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'}]}//我們自己寫一個json數(shù)據(jù)
 window.onscroll=function(){
  if(checkScrollSlide){
   var oparent=document.getElementById("main")
   //將數(shù)據(jù)快渲染到當(dāng)前頁面尾部
   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;//將數(shù)據(jù)加進去
    opic.appendChild(oimg)
   }
   waterfall('main','box');//一會看完整代碼，這就是剛才那些的封裝
  }

 }
 function checkScrollSlide(){//檢測是否具備加載數(shù)據(jù)塊的條件
 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
完整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")
   //將數(shù)據(jù)快渲染到當(dāng)前頁面尾部
   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)
 //計算整個頁面的列數(shù)（頁面寬/box寬）
 var oBoxW=oBoxs[0].offsetWidth;
 //console.log(oBoxW);
 var clos=Math.floor(document.documentElement.clientWidth/oBoxW)//求列數(shù)
 //console.log(clos)
 //設(shè)置main的寬
 oparent.style.cssText='width:'+oBoxW*clos+'px; margin :0 auto';
 var hArr=[];//每一列高度的值
 for (var i = 0; i < oBoxs.length; i++) {
  if(i
看完上述內(nèi)容，你們掌握利用JavaScript怎么實現(xiàn)一個瀑布流效果的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，感謝各位的閱讀！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
            

            分享標(biāo)題：利用JavaScript怎么實現(xiàn)一個瀑布流效果-創(chuàng)新互聯(lián)            

            文章路徑：http://weahome.cn/article/diggjc.html