window.onload=function(){?waterfall('main','box');??var dataInt={"data":[{"src":'img_2.jpg'},{"src":'img_3.jpg'},{"src":'img_5.jpg'},{"src":'img_7.jpg'}]}?window.onscroll=function(){??if(checkScrollSlide){??var allparent=document.getElementById('main');???//將數(shù)據(jù)渲染到頁(yè)面尾部；//獲取一個(gè)對(duì)象的屬性的是要寫(xiě)上對(duì)象及其屬性名稱(dataInt.data)???for(var i=0;i<dataInt.data.length;i++){????var allbox=document.createElement('div');????allbox.className='box';????allparent.appendChild(allbox);//把一個(gè)元素添加到父元素的最后面把a(bǔ)llbox添加到allparent;?????? var allpic=document.createElement('div');????allpic.className='pic';????allbox.appendChild(allpic);????var allimg=document.createElement('img');????allimg.src="img/"+dataInt.data[i].src;????allpic.appendChild(allimg);???}???waterfall('main','box');??}?}}function waterfall(parent,box){?var allparent=document.getElementById(parent);?var allbox=getbyclass(allparent,box);//?console.log(allbox.length);??? var allboxw=allbox[0].offsetWidth;??? var cols=Math.round(document.documentElement.clientWidth/allboxw);//? console.log(cols);??? allparent.style.cssText='width:'+allboxw*cols+'px;margin:0 auto;';??? ??? var harr=[];//存儲(chǔ)每列的高度;??? for(var i=0;i<allbox.length;i++){??? ?if(i<cols){??? ??harr.push(allbox[i].offsetHeight);??? ?}??? ?else{??? ??var minH=Math.min.apply(null,harr);??? ??var id=minH_id(harr,minH);??? ??//console.log(minH);??? ??//console.log(id);??? ??allbox[i].style.position='absolute';??? ??allbox[i].style.top=harr[id]+'px';??? ??//allbox[i].style.left=allboxw*id+'px';第一種獲取左邊距的方法；??? ??allbox[i].style.left=allbox[id].offsetLeft+'px';//第二種獲取左邊距的方法；??? ??harr[id]+=allbox[i].offsetHeight;//讓高最小的圖片加上圖片后為兩者的總高度。??? ??//目的為了刷新最小高度值，不讓后面圖片重疊??? ?}??? }??? //console.log(harr);??? }function getbyclass(parent,clsname){?var boxarr=new Array(),???? allelements=parent.getElementsByTagName('*');? for(var i=0;i<allelements.length;i++){? ?if(allelements[i].className==clsname){? ??boxarr.push(allelements[i]);? ?}? }? return boxarr;}function minH_id(harr,minH){?for(var i in harr){??if(harr[i]==minH){???return i;??}?}}//檢測(cè)條件：滾走距離加上屏幕高度是否超過(guò)頁(yè)面頂部到最后一張圖片一半的距離;function checkScrollSlide(){?var allparent=document.getElementById('main');?var allbox=getbyclass(allparent,'box');?//頁(yè)面頂部到最后一張圖片一半的距離?var lastBoxH=allbox[allbox.length-1].offsetTop+Math.floor(allbox[allbox.length-1].offsetHeight/2);?//滾走距離屏幕高度?var scrollH=document.body.scrollTop || document.documentElement.scrollTop;??//屏幕高度?var clientH=document.body.clientHeight || document.documentElement.clientHeight;??return (lastBoxH<scrollH+clientH)?true:false;?/*if(lastBoxH<scrollH+clientH){??return true;?}?else{??return false;?}*/}