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

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

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']}
	]
}