<!-- JS源生实现 -->
	<script type="text/javascript">
		window.onload=function(){
			 waterfall('main','box');
		}

		function waterfall(parent,box){
			// 将main下所有元素为box的盒子都取出来
			 var oParent = document.getElementById(parent);
			 var oBoxs = getByClass(oParent,box);
			 // console.log(oBoxs.length);打印获取的元素个数
			 // 计算整个页面显示的列数（页面宽/Box的宽）
			 var oBoxW = oBoxs[0].offsetWidth;
			 // console.log(oBoxsW);
			 var cols = Math.floor(document.documentElement.clientWidth/oBoxsW);
			 // 设置main的宽度
			 oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto;'; 
			 var hArr = [];//存放每一列的高度
			 for (var i = 0; i < oBoxs.length; i++) {
			 	if (i<cols) {
			 		hArr.push(oBoxs[i].offsetHeight);
			 	}else{
			 		var minH = Math.min.apply(null,hArr);
			 		var index = getMinhIndex(hArr,minH);
			 		oBoxs[i].style.position='absolute';
			 		oBoxs[i].style.top=minH+'px';
			 		oBoxs[i].style.left=oBoxsW*index+'px';
			 		// oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
			 		hArr[index]+=oBoxs[i].offsetHeight;
			 	}
			 }
		}
		
		// 根据class获取元素
		function getByClass(parent,clsName){
			var boxArr = new Array(),//用来获取所有class为box的元素数组
				oElements = parent.getElementsByTagName('*');
			for (var i = 0; i < oElements.length; i++) {
				 if (oElements[i].classname == clsName) {
				 	boxArr.push(oElements[i]);
				 }
			}
			return boxArr;
		}

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