// 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;
	}			
}