window.onload = function(){
	waterfull('main','box');
}

function waterfull(parent,box){
	var oParent = document.getElementById(parent);
	var oBox = getByClass(oParent,box);
	var oBoxW = oBox[0].offsetWidth;
	var clos = Math.floor(document. documentElement.clientWidth/oBoxW);
	oParent.style.cssText = 'width:'+oBoxW*clos+'px;margin:0 auto;';

	var hArr = [];//存放每列高度的数组
	for (var i = 0; i < oBox.length; i++) {
		if(i<clos){
			hArr[i] = oBox[i].offsetWidth;//先把高度插进数组 
		}else{
			var minH = Math.min.apply(null,hArr);
			var index = getMinhIndex(hArr,minH);
			oBox[i].style.postion = 'absolute';
			oBox[i].style.top = minH+'px';
			//oBox[i].style.left = index*oBoxW+'px';
			oBox[i].style.left = oBox[index].offsetLeft+'px';
			hArr[index]+=oBox[i].offsetHeight;
		}
	}
}

function getByClass(parent,className){
	var boxArr = [],//用来存储获取到的所有class为box的元素
		oElement = parent.getElementsByTagName('*');
	for (var i = 0; i < oElement.length; i++) {
		if(oElement[i].className == className){
			boxArr.push(oElement[i]);
		}
	};
	return boxArr;
}

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