利用JS實現簡單的瀑布流加載圖片效果

2019-11-19 16:46:18

字體：大中小

來源：轉載

供稿：網友

今天學習了一個瀑布流加載效果，很多網站都有瀑布流效果，瀑布流就是很多產品顯示在網頁上，寬相同，高度不同，表現為多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊并附加至當前尾部。

原理是：

1.設定一行中的列數；

2.取第一行中每一個div的高度并把每一個高度放進一個數組中；

3.算出數組中最小高度的index值；

4.把第二行的第一個div放到最小高度的div的下方并把重新算出的高度值放進數組中，重新計算最小高度的index值；

5.以此類推實現多欄布局的瀑布流效果；

6.如果最后一張div的高度已滾動出現在底部時創建新的div添加到最后一張的后面，不斷循環以達到加載效果；接下來代碼實現。

<div id="main">    <div class="box">      <div class="Pic">        <img src="images/0.jpg" alt="" />      </div>    </div>    <div class="box">      <div class="Pic">        <img src="images/1.jpg" alt="" />      </div>    </div>    <div class="box">      <div class="Pic">        <img src="images/2.jpg" alt="" />      </div>    </div>    <div class="box">      <div class="Pic">        <img src="images/3.jpg" alt="" />      </div>    </div>    <div class="box">      <div class="Pic">        <img src="images/4.jpg" alt="" />      </div>    </div>    <div class="box">      <div class="Pic">        <img src="images/5.jpg" alt="" />      </div>    </div>    <div class="box">      <div class="Pic">        <img src="images/6.jpg" alt="" />      </div>    </div>    <div class="box">      <div class="Pic">        <img src="images/7.jpg" alt="" />      </div>    </div>    <div class="box">      <div class="Pic">        <img src="images/8.jpg" alt="" />      </div>    </div>    <div class="box">      <div class="Pic">        <img src="images/9.jpg" alt="" />      </div>    </div>    <div class="box">      <div class="Pic">        <img src="images/10.jpg" alt="" />      </div>    </div>    <div class="box">      <div class="Pic">        <img src="images/11.jpg" alt="" />      </div>    </div>    <div class="box">      <div class="Pic">        <img src="images/12.jpg" alt="" />      </div>    </div>    <div class="box">      <div class="Pic">        <img src="images/13.jpg" alt="" />      </div>    </div>    <div class="box">      <div class="Pic">        <img src="images/14.jpg" alt="" />      </div>    </div>    <div class="box">      <div class="Pic">        <img src="images/15.jpg" alt="" />      </div>    </div>    <div class="box">      <div class="Pic">        <img src="images/16.jpg" alt="" />      </div>    </div>    <div class="box">      <div class="Pic">        <img src="images/17.jpg" alt="" />      </div>    </div>    <div class="box">      <div class="Pic">        <img src="images/18.jpg" alt="" />      </div>    </div>    <div class="box">      <div class="Pic">        <img src="images/19.jpg" alt="" />      </div>    </div>    <div class="box">      <div class="Pic">        <img src="images/20.jpg" alt="" />      </div>    </div>    <div class="box">      <div class="Pic">        <img src="images/21.jpg" alt="" />      </div>    </div>    <div class="box">      <div class="Pic">        <img src="images/22.jpg" alt="" />      </div>    </div>  </div>

 *{padding: 0;margin: 0;}#main{  width: 1000px;  margin: 0 auto;  position: relative;}.box{  display: inline-block;  float: left;  padding: 10px 0 0 10px;}.Pic{  border: 1px #ccc solid;  padding: 10px;  border-radius: 8px;}.Pic img{  width: 162px;}

js代碼：

<script>  window.onload=function(){    waterFall('main','box');    var dataInt={      "data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"}]    };         /*滾動條滾動時觸發的事件*/    window.onscroll=function(){      if(checkIsSlide()){ //結果返回是true則執行        var omain=document.getElementById('main');        /*添加div到頁面上*/        for(var l=0;l<dataInt.data.length;l++){           var box=document.createElement('div');          box.className="box";          omain.appendChild(box);          var pic=document.createElement('div');          pic.className='Pic';          box.appendChild(pic);          var oimg=document.createElement('img');          oimg.src="images/"+dataInt.data[l].src;          pic.appendChild(oimg);        }        waterFall('main','box'); //新添加的div都要重新執行waterFall方法，以實現瀑布流效果      }    }  }  /*實現瀑布流效果，多欄布局*/  function waterFall(parent,pid){  //傳兩個參數，父元素parent和子元素pid    var oparent=document.getElementById(parent);  //獲取父元素    var opid=getClass(oparent,pid);  //獲取父元素下的classname為pid的所有子元素    var cols=Math.floor(oparent.offsetWidth/opid[0].offsetWidth); //父元素寬度/一個子元素的寬度，即一行的列數    var arrH=[];  //存放每一列的高度的數組    for(var j=0;j<opid.length;j++){      if(j<cols){         arrH.push(opid[j].offsetHeight);//把第一行的高度都放進數組中      }else{  //第二行開始        var minH=Math.min.apply(null,arrH);  //計算arrH的最小值        var Index=getHIndex(arrH,minH); //使用getHIndex方法獲取最小值的index值        /*把之后的div放到最小值div的下方*/        opid[j].style.position='absolute';         opid[j].style.top=minH+'px';        opid[j].style.left=opid[0].offsetWidth*Index+'px';        arrH[Index]+=opid[j].offsetHeight; //數組中的最小值加上已放在下方的div的高度值并重新循環      }    }       }   /*獲取父元素下的classname為cls的所有元素*/  function getClass(parent,cls){    var obj=parent.getElementsByTagName('*');    var Clsarr=[];    for(var i=0;i<obj.length;i++){      if(obj[i].className==cls){        Clsarr.push(obj[i]);      }    }    return Clsarr;  }  /*獲取arr數組中的最小值minH的Index值*/  function getHIndex(arr,minH){    for(var k=0;k<arr.length;k++){      if(arr[k]==minH){        return k;      }    }  }  /*判斷當前滾動的高度時候大于最后的div出現在底部的高度值,即是否要加載*/  function checkIsSlide(){    var omain=document.getElementById('main');    var obox=getClass(omain,'box');    var lastTop=obox[obox.length-1].offsetTop+Math.floor(obox[obox.length-1].offsetHeight/2);    var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;    var documentH=document.documentElement.clientHeight;    return (lastTop)<(scrollTop+documentH)?true:false;  }</script>

效果圖如下：