window.onload=function(){
	waterfall('main','box');
	//假设后台需要加载的图片
	var dataInt={"data":[{'src':'16.jpg'},{'src':'17.jpg'},{'src':'18.jpg'},{'src':'19.jpg'},{'src':'20.jpg'},{'src':'21.jpg'},{'src':'22.jpg'},{'src':'23.jpg'},{'src':'24.jpg'},{'src':'25.jpg'},{'src':'26.jpg'},{'src':'27.jpg'},{'src':'28.jpg'},{'src':'29.jpg'},{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},]}
	//滚动条滑动时间
	window.onscroll=function(){
		if(checkScrollSlide()){
			for(var i=0;i<dataInt.data.length;i++){
				var oParent=document.getElementById('main');
				var oDiv=document.createElement('div');
				oDiv.className='box';
				oParent.appendChild(oDiv);
				
				var oPic=document.createElement('div');
				oPic.className='pic';
				oDiv.appendChild(oPic);
				
				var oImg=document.createElement('img');
				oImg.src='img/water-fall/'+dataInt.data[i].src;
				oPic.appendChild(oImg);
				}
				waterfall('main','box');
			}
		}
	}
//将Main下的class='box'取出来	
function waterfall(parent,box){
	oParent=document.getElementById('main');
	oBox=getByClass(oParent,'box');
	//alert(oBox.length);//40
	
	//1、获取每列的宽
	oBoxW=oBox[0].offsetWidth;
	//2、获取列数
	cols=Math.floor(document.documentElement.clientWidth/oBoxW); 
	//3、列*宽=整个浏览器页面的宽度
	oParent.style.cssText="width:"+oBoxW*cols+"px;margin:0 auto;"
	//实现瀑布流布局
	var hArr=[];
	for(var i=0;i<oBox.length;i++){
		//获取第一行所有图片的高度
		if(i<cols){
			hArr.push(oBox[i].offsetHeight);
			}
		else{
			//获取第一行中高度最少的图片并在它之后开始排列
			var minH=Math.min.apply(null,hArr);
			//获取高度最少图片索引
			var index=getIndex(hArr,minH);
			//定位接下来的图片
			oBox[i].style.position='absolute';
			oBox[i].style.top=minH+'px';
			oBox[i].style.left=oBox[index].offsetLeft+'px';
			//***关键一步
			hArr[index]+=oBox[i].offsetHeight;
			}	
			
		}
	}	
function getByClass(obj,cls){	
	var element=obj.getElementsByTagName('*');
	var result=[];
	for(var i=0;i<element.length;i++){
		if(element[i].className==cls){
			result.push(element[i])
			}
		}
	return result;	//不能漏了这一步！！！	
}	

function getIndex(arr,val){
	for(i in arr){
		if (arr[i]==val){
			return i;
			}
		}
	}	
	
function checkScrollSlide(){
	var oParent=document.getElementById('main');
	var oBox=getByClass(oParent,'box');
	//当最后一张图片出现一半时距离他整个页面顶部距离
	var lastBoxH=oBox[oBox.length-1].offsetTop+Math.floor(oBox[oBox.length-1].offsetHeight/2);
	//滚动条移动距离和浏览器本身高度 *****图片解释在img文件夹里！！
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	var clientH=document.documentElement.clientHeight||document.body.clientHeight;
	return (lastBoxH<scrollTop+clientH)?true:false;
	}