window.onload = function(){
	
	var oParent = document.getElementById('main');
	waterFall(oParent);
	window.onscroll = function(){
		if(checkLoad()){
			// 将数据渲染到页面里
			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;
					oImg.style.cssText = 'transform: scale(0);';
					oImg.onload = function(){
						this.style.cssText = 'transform: scale(1);transition: transform 1s .5s;'
					}
					oPic.appendChild(oImg);
			}
			waterFall(oParent);
		}
		
	}
	window.onresize = function(){
		waterFall(oParent);
	}
}

function waterFall(oParent){
	
	var oBox = getClsName('box');
	
	// 计算整个页面的列数
	var oBoxW = oBox[0].offsetWidth;
	var paddingLeft = parseInt(getAttr(oBox[0],'paddingLeft'));	
	var cols = Math.floor(document.documentElement.clientWidth / oBoxW);
	
	// 设置main的属性
	oParent.style.cssText = 'width:'+oBoxW*cols+'px;margin:0 auto;left:'+(-paddingLeft/2)+'px';
	// 存取每列的高度
	var hArr = [];
	for(var i=0;i<oBox.length;i++){
		if(i<cols){// 如果i < cols 说明是前六个box的高度
			hArr.push(oBox[i].offsetHeight);
			oBox[i].style.cssText='position:absolute;top:0px;left:'+oBoxW*i+'px;';
		}else{ // i>cols存取每列的高度
			var minH = Math.min.apply(null,hArr);
			var index = getMinHIndex(hArr,minH);
			oBox[i].style.cssText='position:absolute;top:'+minH+'px;left:'+oBoxW*index+'px;';
			hArr[index] += oBox[i].offsetHeight;
		}
	}
	
}




// 选择出class为box的 元素
function getClsName(cls){
	var eles = document.getElementsByTagName('*');
	var curEle = [];
	for(var i=0;i<eles.length;i++){
		if(eles[i].className == cls){
			curEle.push(eles[i]);
		}
	}
	return curEle;
}
// 获取元素的样式
function getAttr(obj,attr){
	return window.getComputedStyle?window.getComputedStyle(obj,null)[attr]:obj.currentStyle[attr];
}


// 获取最小值的索引
function getMinHIndex(arr,val){
	for(var i in arr){
		if(arr[i] == val){
			return i;
		}
	}
}
// 检测是否具备加载条件
function checkLoad(){
	var oBox = getClsName('box');
	var lastBoxH = oBox[oBox.length-1].offsetTop;
	var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
	
	var pageH = document.body.clientHeight|| document.documentElement.clientHeight;
	
	return (lastBoxH < scrollTop + pageH)?true:false;
//	var lastBoxH = oBox[oBox.length-1].offsetTop+Math.floor(oBox[oBox.length-1].offsetTop/2);
}