//?JavaScript?Document
//第一步獲取元素
window.onload=function(){
	var?main=document.getElementById('main');
	var?box=getName(main,'box');
	var?dataInt={"data":[{"src":'P_00.jpg'},
	{"src":'P_01.jpg'},
	{"src":'P_02.jpg'},
	{"src":'P_03.jpg'},
	{"src":'P_04.jpg'}]}
window.onscroll=function(){?
	if(checkedit){
		for(var?i=0;i<dataInt.data.length;i++){
	var?cbox=document.createElement('div');
	cbox.className='box';
	main.appendChild(cbox);
	var?cpic=document.createElement('div');
	cpic.className='pic';
	cbox.appendChild(cpic);
	var?cimg=document.createElement('img');
	cimg.src="images/"+dataInt.data[i].src;
	cpic.appendChild(cimg);
		}
	waterfull();	
	}
	
}//onscroll
function?waterfull(){
	//console.log(box.length);
//第二步?將圖片放到高度最小的圖片下面
var?cols=Math.floor(document.documentElement.clientWidth/box[0].offsetWidth);
//列數
var?hrry=[];
//新建數組用來儲存高度值
for(var?i=0;i<box.length;i++){
	if(i<cols){
		hrry.push(box[i].offsetHeight);
		
		}	
	?else{
		var?minH=Math.min.apply(null,hrry);
		var?index=getIndex(hrry,minH);
		box[i].style.position='absolute';
		box[i].style.top=minH+'px';
		//box[i].style.left=cols*index+'px';
		box[i].style.left=box[index].offsetLeft+'px';
		hrry[index]+=box[i].offsetHeight;
		console.log(hrry);
		}	
	}
}//waterfull
//獲取高度值最小的序號
function?getIndex(arry,val){
	for(i?in?arry){
		if(arry[i]==val){
			return?i;
			}
		}
	}
//獲取class名的元素	
function?getName(parent,child){
	var?arry=[];
	var?ele=parent.getElementsByTagName('*');
	for(var?i=0;i<ele.length;i++){
		if(ele[i].className==child){
			arry.push(ele[i]);
			}
		}
		return?arry;
	}//getname
//檢查是否應該加載圖片
function?checkedit(){
	var?lastbox=box[box.length-1];
	var?boxh=lastbox.offsetTop+Math.floor(lastbox.offsetHeight/2);
	var?mainh=document.body.clientHeight||document.documentElement.clientHeight;
	var?scrolltop=document.body.scrollTop||document.documentElement.scrollTop;
	return?(boxh<scrolltop+mainh)?true:false;
	}			
}