原生JS實現瀑布流及載入效果
阿新 • • 發佈:2019-02-01
瀑布流是目前一種比較流行的頁面佈局和載入效果。百度,花瓣等一些好的網站都廣泛用了這樣一種效果,適用於單頁面展示對內容的頁面。這幾天就跟著一些資料學習了一下瀑布流效果的製作。其原理是利用js動態的改變絕對定位的位置,然後對滾動條的事件監聽,載入資料。現在為大家分享下JS程式碼,希望路過的大神多多指教。其具體實現步驟在程式碼註釋中體現,博文最後有原始碼資源,供大家免費交流學習……
HTML程式碼:
css<div id="main"> <div class="List"> <div class="box"><img src="images/0.jpg"></div> </div> <div class="List"> <div class="box"><img src="images/1.jpg"></div> </div> <div class="List"> <div class="box"><img src="images/2.jpg"></div> </div> <div class="List"> <div class="box"><img src="images/3.jpg"></div> </div> <div class="List"> <div class="box">------------剛進入頁面時顯示的個數--------------</div> </div>
*{margin: 0;padding: 0;}
#main{position: relative;}
.List{float: left;padding: 15px 0 0 15px;}
.box{padding: 10px;border: 1px solid #000;}
.box img{width: 165px;height: auto;}
JS
原始碼下載地址:http://download.csdn.net/download/u014703834/8137977window.onload = function(){ //對頁面現有的資料進行排版佈局 showBox('main','List'); //模擬,接受進來的json資料 var dateInt={"date":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}]}; //給視窗新增滾動條新增方法 window.onscroll=function(){ if(checkScroll()){//呼叫方法,判斷是否具備資料載入的條件。把資料載入到頁面的尾部 var parenet=document.getElementById("main"); //遍歷資料,且建立元素進行載入 for(var i=0;i<dateInt.date.length;i++){ var ListCon=document.createElement("div");//建立div ListCon.className='List';//新增class類名 parenet.appendChild(ListCon);//載入到父節點 var oBoxs=document.createElement("div"); oBoxs.className="box"; ListCon.appendChild(oBoxs); var oImg=document.createElement("img"); oImg.src="images/"+dateInt.date[i].src; oBoxs.appendChild(oImg); } showBox('main','List');//對新載入的資料進行排位規格化 } } } //函式功能,對第一個容器引數下的第二個className容器引數進行排列規劃 function showBox (parenet,clsName) {//一個父級元素。一個className,排列主方法執行體 var oParenet=document.getElementById(parenet); var oBoxs=getByClass(oParenet,clsName);//listBox集合陣列,呼叫的getByclass函式。得到返回陣列 //計算螢幕能有幾列,螢幕的寬度/每一個List的寬度 var oBoxW = oBoxs[0].offsetWidth;//list,width var clos=Math.floor(document.documentElement.clientWidth/oBoxW);//math.floor取整數,求出列數 //設定主容器的寬度,和對齊方式 oParenet.style.cssText='width:'+oBoxW*clos+'px;margin:0 auto'; //儲存第一列所有高度,判斷最低的高度,讓第二行的第一個元素排列到最低的那一個, //然後把最低的一個高度改變成最低高度+它下方的高度,則,最低的一個高度改變,依次遍歷 var AllBox = [];//儲存第一行高度的陣列 for(var i=0;i<oBoxs.length;i++){ if (i<clos) { AllBox.push(oBoxs[i].offsetHeight);//傳入資料 }else{ var minH=Math.min.apply(null,AllBox);//math.min不能直接接受陣列,需要用apply方法,把陣列轉化成字串 var index=getMinIndex(AllBox,minH);//呼叫getMainIndex方法,求出第一行中,高度最小的index值 //定義第i個box的樣式,以及位置 oBoxs[i].style.position='absolute'; oBoxs[i].style.top=minH+'px'; oBoxs[i].style.left=oBoxW*index+'px'; //改變最低點的大小。從而動態的不斷的去獲取目前最低點 AllBox[index]+=oBoxs[i].offsetHeight; } } } //尋找這個id下的所有的className,返回一個className的陣列 function getByClass (parenet,clsName) {//傳入一個父元素,一個className。 var sameClassArr=new Array(),//用來儲存class為box的元素 chiled=parenet.getElementsByTagName('*');//父級元素下的獲取所有元素 for(var i=0;i<chiled.length;i++){//遍歷判斷哪些元素的className為傳入的clsName if(chiled[i].className==clsName){ sameClassArr.push(chiled[i]);//傳入函式陣列 } } return sameClassArr;//返回陣列 } //傳入一個數組,和一個最小值,返回這個最小值的角標index function getMinIndex (arr,min) { for(var i=0;i<arr.length;i++){ if (arr[i]==min) { return i; } } } //檢查書否具備資料載入的函式,返回布林值 function checkScroll () { var parenet=document.getElementById("main"); var oBoxs=getByClass(parenet,'List'); //最後一個單元元素距離頁面頂端的高度,再加自身高度的一半 var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2); //滾動條滾動的的高度,混雜模式||標準模式 var scrollTop=document.body.scrollTop || document.documentElement.scrollTop; //頁面的高度,可視區域 var WHeight=document.body.clientHeight || document.documentElement.clientHeight; return (lastBoxH<scrollTop+WHeight)?true:false; }