HTML程式碼：

<div id="main">
	<div class="List">
		<div class="box"><img src="images/0.jpg"></div>
	</div>
	<div class="List">
		<div class="box"><img src="images/1.jpg"></div>
	</div>
	<div class="List">
		<div class="box"><img src="images/2.jpg"></div>
	</div>
	<div class="List">
		<div class="box"><img src="images/3.jpg"></div>
	</div>
	<div class="List">
		<div class="box">------------剛進入頁面時顯示的個數--------------</div>
	</div>
 

*{margin: 0;padding: 0;}
#main{position: relative;}
.List{float: left;padding: 15px 0 0 15px;}
.box{padding: 10px;border: 1px solid #000;}
.box img{width: 165px;height: auto;}

window.onload = function(){
	//對頁面現有的資料進行排版佈局
	showBox('main','List');
	//模擬，接受進來的json資料
	var dateInt={"date":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}]};
	//給視窗新增滾動條新增方法
	window.onscroll=function(){
		if(checkScroll()){//呼叫方法，判斷是否具備資料載入的條件。把資料載入到頁面的尾部
			var parenet=document.getElementById("main");
			//遍歷資料,且建立元素進行載入
			for(var i=0;i<dateInt.date.length;i++){
				var ListCon=document.createElement("div");//建立div 
				ListCon.className='List';//新增class類名
				parenet.appendChild(ListCon);//載入到父節點

				var oBoxs=document.createElement("div");
				oBoxs.className="box";
				ListCon.appendChild(oBoxs);

				var oImg=document.createElement("img");
				oImg.src="images/"+dateInt.date[i].src;
				oBoxs.appendChild(oImg);
			}
			showBox('main','List');//對新載入的資料進行排位規格化

		 }
		
	}
}

//函式功能，對第一個容器引數下的第二個className容器引數進行排列規劃
function showBox (parenet,clsName) {//一個父級元素。一個className，排列主方法執行體
	var oParenet=document.getElementById(parenet);
	var oBoxs=getByClass(oParenet,clsName);//listBox集合陣列,呼叫的getByclass函式。得到返回陣列
	//計算螢幕能有幾列，螢幕的寬度/每一個List的寬度
	var oBoxW = oBoxs[0].offsetWidth;//list,width
	var clos=Math.floor(document.documentElement.clientWidth/oBoxW);//math.floor取整數，求出列數
	//設定主容器的寬度,和對齊方式
	oParenet.style.cssText='width:'+oBoxW*clos+'px;margin:0 auto';

	//儲存第一列所有高度,判斷最低的高度，讓第二行的第一個元素排列到最低的那一個，
	//然後把最低的一個高度改變成最低高度+它下方的高度，則，最低的一個高度改變，依次遍歷
	var AllBox = [];//儲存第一行高度的陣列
	for(var i=0;i<oBoxs.length;i++){
		if (i<clos) {
			AllBox.push(oBoxs[i].offsetHeight);//傳入資料
		}else{
			var minH=Math.min.apply(null,AllBox);//math.min不能直接接受陣列，需要用apply方法，把陣列轉化成字串

			var index=getMinIndex(AllBox,minH);//呼叫getMainIndex方法，求出第一行中，高度最小的index值
			//定義第i個box的樣式，以及位置
			oBoxs[i].style.position='absolute';
			oBoxs[i].style.top=minH+'px';
			oBoxs[i].style.left=oBoxW*index+'px';
			//改變最低點的大小。從而動態的不斷的去獲取目前最低點
			AllBox[index]+=oBoxs[i].offsetHeight;
		}
	}			
}

//尋找這個id下的所有的className,返回一個className的陣列
function getByClass (parenet,clsName) {//傳入一個父元素，一個className。
	var sameClassArr=new Array(),//用來儲存class為box的元素
		chiled=parenet.getElementsByTagName('*');//父級元素下的獲取所有元素

	for(var i=0;i<chiled.length;i++){//遍歷判斷哪些元素的className為傳入的clsName
		if(chiled[i].className==clsName){
			sameClassArr.push(chiled[i]);//傳入函式陣列
		}
	}
	return sameClassArr;//返回陣列
}
//傳入一個數組，和一個最小值，返回這個最小值的角標index
function getMinIndex (arr,min) {
	for(var i=0;i<arr.length;i++){
		if (arr[i]==min) {
			return i;
		}
	}
}

//檢查書否具備資料載入的函式，返回布林值
function checkScroll () {
	var parenet=document.getElementById("main");
	var oBoxs=getByClass(parenet,'List');
	//最後一個單元元素距離頁面頂端的高度，再加自身高度的一半
	var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
	//滾動條滾動的的高度,混雜模式||標準模式
	var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
	//頁面的高度，可視區域
	var WHeight=document.body.clientHeight || document.documentElement.clientHeight;
	return (lastBoxH<scrollTop+WHeight)?true:false;
}