<!--?JS源生實現(xiàn)?-->
	<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);打印獲取的元素個數(shù)
			?//?計算整個頁面顯示的列數(shù)（頁面寬/Box的寬）
			?var?oBoxW?=?oBoxs[0].offsetWidth;
			?//?console.log(oBoxsW);
			?var?cols?=?Math.floor(document.documentElement.clientWidth/oBoxsW);
			?//?設(shè)置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;
			?	}
			?}
		}
		
		//?根據(jù)class獲取元素
		function?getByClass(parent,clsName){
			var?boxArr?=?new?Array(),//用來獲取所有class為box的元素數(shù)組
				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>