#學習筆記#(28)+JS瀑布流-滾動條下拉載入圖片
阿新 • • 發佈：2019-02-18
waterfall.html
javascript.js<html> <head> <title>瀑布流佈局</title> <meta charset="gb2312"/> <link type="text/css" rel="stylesheet" href="style2.css"/> <script src="javascript2.js"></script> </head> <body> <div id="main"><!--放置所有圖片的容器，設定id方便js獲取元素--> <div class="box"><!--每張圖片用一個box裝載--> <div class="pic"><!--在這裡放置圖片，並設定圖片的樣式--> <img src="images/0.jpg"></img> </div> </div> <div class="box"> <div class="pic"> <img src="images/0.jpg"></img> </div> </div> <div class="box"> <div class="pic"> <img src="images/1.jpg"></img> </div> </div> <div class="box"> <div class="pic"> <img src="images/2.jpg"></img> </div> </div> <div class="box"> <div class="pic"> <img src="images/3.jpg"></img> </div> </div> <div class="box"> <div class="pic"> <img src="images/4.jpg"></img> </div> </div> <div class="box"> <div class="pic"> <img src="images/5.jpg"></img> </div> </div> <div class="box"> <div class="pic"> <img src="images/6.jpg"></img> </div> </div> <div class="box"> <div class="pic"> <img src="images/7.jpg"></img> </div> </div> <div class="box"> <div class="pic"> <img src="images/8.jpg"></img> </div> </div> <div class="box"> <div class="pic"> <img src="images/9.jpg"></img> </div> </div> <div class="box"> <div class="pic"> <img src="images/10.jpg"></img> </div> </div> <div class="box"> <div class="pic"> <img src="images/11.jpg"></img> </div> </div> <div class="box"> <div class="pic"> <img src="images/12.jpg"></img> </div> </div> <div class="box"> <div class="pic"> <img src="images/13.jpg"></img> </div> </div> <div class="box"> <div class="pic"> <img src="images/14.jpg"></img> </div> </div> <div class="box"> <div class="pic"> <img src="images/15.jpg"></img> </div> </div> <div class="box"> <div class="pic"> <img src="images/16.jpg"></img> </div> </div> <div class="box"> <div class="pic"> <img src="images/17.jpg"></img> </div> </div> <div class="box"> <div class="pic"> <img src="images/18.jpg"></img> </div> </div> <div class="box"> <div class="pic"> <img src="images/19.jpg"></img> </div> </div> <div class="box"> <div class="pic"> <img src="images/20.jpg"></img> </div> </div> </div> </body> </html>
window.onload=function(){ waterfall("main","box"); var imgs={//用json格式模擬從資料庫後臺抽取出的圖片陣列 "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"}, {"src":"8.jpg"}, {"src":"9.jpg"}, {"src":"10.jpg"}, {"src":"11.jpg"}, {"src":"12.jpg"}, {"src":"13.jpg"} ] } window.onscroll=function(){ if(checheScrollSlide){ var oparent=document.getElementById("main"); //將資料塊渲染到當前頁面的尾部 for(var i=0;i<imgs.data.length;i++){ //建立class=box的div元素 var oBox=document.createElement("div"); oBox.className="box"; oparent.appendChild(oBox); //建立class=pic的div元素 var oPic=document.createElement("div"); oPic.className="pic"; oBox.appendChild(oPic); //建立圖片img var oImg=document.createElement("img"); oImg.src="images/"+imgs.data[i].src; oPic.appendChild(oImg); } //將載入的圖片進行瀑布流排列 waterfall("main","box"); } } } //瀑布流原理：計算出頁面總共有多少列，從第二列起，將圖片依次放在總高度最小的那一列下面 function waterfall(parent,box){ //1 獲取所有裝載圖片的box var oparent=document.getElementById(parent); var oBoxs=getElementByClass(oparent,box);//傳入父元素和類名 //2 獲取頁面寬度 var docWidth=document.documentElement.clientWidth; //3 獲取box寬度 var boxWidth=oBoxs[0].offsetWidth; //4 計算出列數 var cols=Math.floor(docWidth/boxWidth); //5 設定頁面寬度、居中顯示 oparent.style.cssText="width:"+cols*boxWidth+"px;margin:0px auto;"; //6 瀑布流排列 var hArr=[];//存放每一列的高度 for(var i=0;i<oBoxs.length;i++){ //6.1 設定第一列樣式 if(i<cols){ hArr.push(oBoxs[i].offsetHeight); //儲存第一列的圖片高度 }else{ //6.2 設定從第二列起的樣式 //找出高度最小的那一張圖片的是第幾張:index var minH=Math.min.apply(null,hArr); var index=getIndex(hArr,minH); //將下一張圖片用絕對定位設定，排列在高度最小的圖片下面，並計算此時的列高 oBoxs[i].style.position="absolute"; oBoxs[i].style.top=minH+"px"; oBoxs[i].style.left=oBoxs[index].offsetLeft+"px"; hArr[index]+=oBoxs[i].offsetHeight; } } } function getElementByClass(oparent,clsname){ var oElements=oparent.getElementsByTagName("*");//獲取oparent下的所有子元素 var oBoxs=[]; for(var i=0;i<oElements.length;i++){ if(oElements[i].className==clsname) oBoxs.push(oElements[i]); } return oBoxs; } function getIndex(arr,val){ for(var i=0;i<arr.length;i++) if(arr[i]==val) return i; } //檢測是否具備了滾動載入資料塊的條件 function checheScrollSlide(){ var oparent=document.getElementById("main"); var oBoxs=getElementByClass(oparent,"box"); //最後一個Box所在列的高度+最後一個box高度的一半 var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight); //滾動條拖動的距離（注意混雜模式document.body.scrollTop和標準模式document.documentElement.scrollTop） var scrollTop=document.body.scrollTop || document.documentElement.scrollTop; //瀏覽器可視視窗的高度（注意混雜模式和標準模式） var height=document.body.clientHeight || document.documentElement.clientHeight; return(lastBoxH<scrollTop+height)?true:false;//當滾動條下拉到圖片的時候 }
style.css
*{
margin:0px;
padding:0px;
}
#mian{
position:relative;
}
.box{
float:left;
padding:15px 0px 0px 15px;
}
.pic{
padding:10px;
border:1px solid #ccc;
border-radius:5px;
box-shadow:0 0 5px #ccc;
}
.pic img{
width:165px;
height:auto;
}