// JavaScript Document
window.onload=function(){
?? ?waterfall('main','box');
?? ?//假設(shè)這是后臺(tái)給的數(shù)據(jù)塊
?? ?var dataint={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'}]}
?? ?window.onscroll=function(){
?? ??? ?if(checkScrollSlide()){
?? ??? ??? ?var oparent=document.getElementById('main');
?? ??? ??? ?//如果條件為真，則將數(shù)據(jù)塊渲染到頁(yè)面尾部
?? ??? ??? ?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='images/'+dataint.data[i].src;
?? ??? ??? ??? ? opic.appendChild(oimg);
?? ??? ??? ??? ?}
?? ??? ??? ??? ?waterfall('main','box');
?? ??? ??? ?}
?? ??? ?}
?? ?}
?? ??? ??? ?
function waterfall(partent,box){
?? ?//將main下面所有class為box的元素取出來(lái)
?? ?var oparent=document.getElementById(parent);
?? ?var boxs=getByClass(oparent,box);
?? ?//計(jì)算整個(gè)頁(yè)面顯示的列數(shù)（頁(yè)面寬度/box的寬度）
?? ?var boxwidth=boxs[0].offsetWidth;
?? ?var cols=Math.floor(document.documentElement.clientWidth/boxwidth);
?? ?//設(shè)置main的寬度
?? ?oparent.style.cssText='width:'+boxwidth*cols+'px;margin:0 auto;';
?? ?var heightarr=[];
?? ?for(var i=0; i<boxs.length; i++){
?? ??? ?if(i<cols){
?? ??? ??? ?heightarr.push(boxs[i].offsetHeight);
?? ??? ??? ?}else{
?? ??? ??? ??? ?var minh=Math.min.apply(null,heightarr);
?? ??? ??? ??? ?var index=getminhindex(heightarr,minh);
?? ??? ??? ??? ?boxs[i].style.position='absolute';
?? ??? ??? ??? ?boxs[i].style.top=minh+'px';
?? ??? ??? ??? ?boxs[i].style.left=boxwidth*index+'px';
?? ??? ??? ??? ?heightarr[index]=minh+boxs[i].offsetHeight;
?? ??? ??? ?}
?? ??? ?}
?? ?}
?? ?function getByClass(parent,clsname){
?? ??? ?var boxarr=new Array(),//用來(lái)存儲(chǔ)將來(lái)所有class為box的元素
?? ??? ???? oelements=parent.getElementsByTagName('*');
?? ??? ?for(var i=0; i< oelements.length; i++){
?? ??? ??? ? if(oelements[i].className==clsname){
?? ??? ??? ?? boxarr.push(oelements[i]);
?? ??? ??? ?}?? ?
?? ??? ?}
?? ?? return boxarr;?? ?
?? ?}
?? ?function getminhindex(arr,val){
?? ??? ?for(var i in arr){
?? ??? ??? ?if(arr[i]==val){
?? ??? ??? ?return i;
?? ??? ??? ?}
?? ??? ?? }
?? ??? ?}
?? ?//檢測(cè)是否具備加載數(shù)據(jù)塊的條件?? ?
?? ?function checkScrollSlide(){
?? ??? ?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);
?? ??? ?//獲取滾動(dòng)條滾動(dòng)高度，在混雜模式下用body，在標(biāo)準(zhǔn)模式下documentElement
?? ??? ?var scrolltoph=document.body.scrollTop || document.documentElement.scrollTop;
?? ??? ?//接下來(lái)獲取瀏覽器窗口高度
?? ??? ?var height=document.body.clientHeight || document.documentElement.clientHeight;
?? ??? ?return (lastboxh<height+scrolltoph)?true:false;
?? ??? ?}???