两种常见瀑布流（定位的瀑布流与浮动的瀑布流）

类似蘑菇街，美丽说网站的瀑布流

1.定位的瀑布流：
window.onload = function(){

	var aLi = document.getElementsByTagName('li');
	var aHeight = {L:[],C:[],R:[]};
	
	for(var i=0;i<aLi.length;i++){
		var iNow = i%3;
		
		switch(iNow){
			case 0:
				aLi[i].style.left = '5px';
				aHeight.L.push(aLi[i].offsetHeight);
				
				var step = Math.floor(i/3);
				
				if(!step){
					aLi[i].style.top = 0;
				}
				else{
					var sum = 0;
					for(var j=0;j<step;j++){
						sum += aHeight.L[j] + 5;
					}
					aLi[i].style.top = sum + 'px';
				}
				
			break;
			case 1:
				aLi[i].style.left = '240px';
				aHeight.C.push(aLi[i].offsetHeight);
				
				var step = Math.floor(i/3);
				
				if(!step){
					aLi[i].style.top = 0;
				}
				else{
					var sum = 0;
					for(var j=0;j<step;j++){
						sum += aHeight.C[j] + 5;
					}
					aLi[i].style.top = sum + 'px';
				}
			break;
			case 2:
				aLi[i].style.left = '475px';
				aHeight.R.push(aLi[i].offsetHeight);
				
				var step = Math.floor(i/3);
				
				if(!step){
					aLi[i].style.top = 0;
				}
				else{
					var sum = 0;
					for(var j=0;j<step;j++){
						sum += aHeight.R[j] + 5;
					}
					aLi[i].style.top = sum + 'px';
				}
			break;
		}
	}
	
};

2.浮动的瀑布流：
window.onload = function(){
	var aUl = document.getElementsByTagName('ul');
	var bBtn = true;
	
	window.onscroll = function(){
		
		var veiwHeight = document.documentElement.clientHeight;
		var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
	
		for(var i=0;i<aUl.length;i++){
			
			var aLi = aUl[i].getElementsByTagName('li');
				
			var lastLi = aLi[aLi.length-1];
			
			if(posTop(lastLi) < veiwHeight + scrollY && bBtn){
				
				bBtn = false;
				
				ajax('data.js',function(str){
					
					var json = eval('('+ str +')');
					
					if(json.code){
						bBtn = true;
					}
					
					for(var i=0;i<json.list.length;i++){
						var list = json.list[i];
						
						for(var j=0;j<list.src.length;j++){
							var oLi = document.createElement('li');
							oLi.innerHTML = '[img]'+ list.src[j] +'[/img]'+ list.title[j] +'
';
							aUl[i].appendChild(oLi);
						}
						
					}
					
				});
				
			}
			
		}
	};


	
	function posTop(obj){
		var top = 0;
		
		while(obj){
			top += obj.offsetTop;
			obj = obj.offsetParent;
		}
		
		return top;
	}
};


所需测试的json数据：
{
	code : 0,
	list : [
		{src:['img/1.jpg','img/2.jpg','img/3.jpg'],title:['222222222','222222222','222222222']},
		{src:['img/4.jpg','img/5.jpg','img/6.jpg'],title:['222222222','222222222','222222222']},
		{src:['img/7.jpg','img/8.jpg','img/9.jpg'],title:['222222222','222222222','222222222']}
	]
}