window.onload=function(){
	waterfall('main','box');
	var?dataInt?={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}]}
	window.onscroll=function(){
		if?(checkScrollslide)?{
			var?oParent=document.getElementById('main');
			//將數據款渲染到頁面的尾部
			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="img/"+dataInt.data[i].src;
				oPic.appendChild(oImg);
			}
			waterfall('main','box');
		}
	}
}

function?waterfall(parent,box){
	//將main下的所有class為box的元素取出來
	var?oParent=document.getElementById(parent);
	var?oBoxs=getByClass(oParent,box);
	//計算整個頁面顯示的列數
	var?oBoxW=oBoxs[0].offsetWidth;
	var?cols=Math.floor(document.documentElement.clientWidth/oBoxW);
	console.log(cols);
	//設置main的寬度
	oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0?auto';
	var?hArr?=[];//存放每一列圖片嗎的高度
	for?(var?i=0;i<oBoxs.length;i++)?{
		if(i<cols){
			hArr.push(oBoxs[i].offsetHeight);
		}else{
			var?minH=Math.min.apply(null,hArr);
			var?index=getMinhIndex(hArr,minH);
			oBoxs[i].style.position='absolute';
			oBoxs[i].style.top=minH+'px';
			//oBoxs[i].style.left=oBoxW*index+'px';
			oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
			hArr[index]+=oBoxs[i].offsetHeight;
		}
	}
}

//根據class獲取元素
function?getByClass(parent,clsName){
	var?boxArr=new?Array(),//用來存儲所有class為box的元素
			oElement=parent.getElementsByTagName('*');
	for?(var?i=0;i<oElement.length;i++)?{
		if(oElement[i].className?==clsName){
			boxArr.push(oElement[i]);
		}
	}
	return?boxArr;
}

function?getMinhIndex(arr,val){
	for?(var?i?in?arr)?{
		if?(arr[i]==val)?{
			return?i;
		}
	}
}

//檢測是否具備了加載數據塊的條件
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);
	var?scrollTop=document.body.scrollTop?||?document.documentElement.scrollTop;
	var?heught=document.body.clientHeight?||?document.documentElement.clientHeight;
	return?(lastBoxH<scrollTop+heught)?true:false;
}