1、首先設定好容器，每張圖片的寬度設定為固定寬度，高度自適應

	<div id="main">
		<div  class="box">
			<img src="images/0.jpg" />
		</div>
                …………
                …………
    </div>

2、根據電腦解析度，每排顯示的圖片數量不同，然後根據圖片數量計算出容器的寬度

	var oParent = document.getElementById(parent);
	var oKids = getKidsByClassName(parent,clsName);
	var okW = oKids[0].offsetWidth+15; //每一個子元素所佔的寬度
	var num = Math.floor(document.documentElement.clientWidth/okW);//螢幕最多能放多少列
	var mainW = okW*num;
	oParent.style.cssText = "width:"+mainW+"px;margin:0 auto"; //讓整個容器居中
 

 3、將容器看成幾個列組成，將第一排的列的高度儲存在hArr陣列中，之後每一個元素都要查詢hArr中最低列放置，並修改列的值

	var hArr = [];
	for(var i = 0; i<oKids.length;i++){
		if(i<num){
			hArr.push(oKids[i].offsetHeight+15); //把第一排的列高放進去
		}else{
			var minH = Math.min.apply(null,hArr); //找出一列中列高最小的 下一個元素就放在這一列
			var minIndex = hArr.indexOf(minH);
			var left = (oKids[i].offsetWidth+15)*minIndex;
			oKids[i].style.cssText = "position:absolute;top:"+minH+"px;left:"+left+"px;"; //將元素設定成絕對定位，設定top left值
			hArr.splice(minIndex,1,minH+oKids[i].offsetHeight+15); //修改列高
		}
	}
 

4、實現圖片動態載入，通過監聽滾動事件，當最高列的最後一個元素露出一半高度時動態載入圖片

function checkHeight(){
	var oParent = document.getElementById("main");
	var oKids = getKidsByClassName("main","box");
	var lastKid = oKids[oKids.length-1];
	var lastH = lastKid.offsetTop+Math.floor(lastKid.offsetHeight/2);//最後一個元素漏出一半高度
	var scrollH =document.documentElement.scrollTop||document.body.scrollTop;//注意解決相容性 滾動的高度
	var screeH = document.body.clientHeight || document.documentElement.clientHeight;//頁面高度
	return lastKid < scrollH+screeH; //當最後一個元素露出一半時 開始載入其他元素

}
 

	window.onscroll = function(){
		if(checkHeight){//當最後一個元素露出一半時 開始載入其他元素
			var oParent = document.getElementById("main");
			for(var i = 0;i<dataInt.data.length;i++){
				var oDiv = document.createElement("div");
				oDiv.className = "box";
				oParent.appendChild(oDiv);
				var oImg = document.createElement("img");
				oImg.src = "images/"+dataInt.data[i].src;
				oDiv.appendChild(oImg);
			}
			waterfall("main","box"); //調整格式
		}
	}

實現效果（第一次錄屏，所以錄得不好0~0）