瀑布流（浮动版） demo

gistfile1.txt

/*----------------------------css-----------------------------------*/

	<style type="text/css">
		body{background: #000}
		body,img{margin: 0;padding: 0}
		.box{padding: 20px;}
		.box .col{width: 214px;margin-right: 15px;float: left;}
		.box a{display: block;padding: 5px;border: 1px solid #222;background-color: #000;text-decoration:none;margin-bottom: 20px;text-align: center;}
		.box a:hover{background: #ff3b26;cursor: pointer;}
		.box img{}
		.box .mrn{margin-right: 0}

		.loading{position: fixed;left: 50%;margin-left: -110px;bottom: 0;text-align: center;width: 200px;background: #FFF;padding: 10px;border-radius: 10px 10px 0 0;opacity: 0.7;}

		.clearfix:after{clear:both; content:"."; display:block; height:0; line-height:0; font-size:0;  visibility:hidden; }
		.clearfix{zoom:1;} 
	</style>

/*----------------------------HTML-----------------------------------*/
<div id="box" class="box clearfix">
		<!-- <div id="col0" class="col"></div>
		<div id="col1" class="col"></div>
		<div id="col2" class="col"></div>
		<div id="col3" class="col"></div>
		<div id="col4" class="col mrn"></div> -->
		<!-- <div id="col5" class="col mrn"></div> -->
	</div>

	<div id="loading" class="loading">
		<img src="loading.gif" alt="" />
	</div>
	
	
/*----------------------------js-----------------------------------*/
;(function(){
	var $box = $('box'),
	url = 'blogs/tags/hot/?tags=春装%2C发型%2C美妆%2C街拍%2C婚纱&_type=&page=',
	url = '../waterfall/php_proxy_simple.php?yws_path=' + encodeURIComponent(url);

	var waterfall = waterfall || {};

	waterfall.options = {
		colHeights: [],//每列高度
		minHeight: 0,//最小高度
		colNum: 0,//列数
		colWidth: 214,//列宽
		firstRowNum: 0,//第一行列数
		marginRight: 15,//默认右边距
		paddingRight: 20,//默认容器内边距
		viewWidth: 0,//可视区域宽度（不包含滚动条）
		images: 0,//图片数量
		page: 1,//默认第一页数据
		isAjax: true//是否正在加载...
	}

	waterfall.init =function(){
		waterfall.fn.createCol();
		waterfall.fn.getData(url,1);
	}

	waterfall.fn = {
		createCol:function(){
			var col = [], contentWidth = overWidth = avgMargin = 0, html = '';
			//计算可视区域宽度（不包含滚动条）
			waterfall.options.viewWidth = (document.documentElement.clientWidth || document.body.clientWidth) - getScrollWidth() - (waterfall.options.paddingRight * 2);

			//计算需要生成的列数
			waterfall.options.colNum = waterfall.options.firstRowNum = Math.floor(waterfall.options.viewWidth / (waterfall.options.colWidth + waterfall.options.marginRight));

			//获取内容实际宽度
			contentWidth = (waterfall.options.colNum * (waterfall.options.colWidth + waterfall.options.marginRight));

			//计算剩余空白宽度
			overWidth = waterfall.options.viewWidth - contentWidth;

			//计算平均分配间距
			avgMargin = (overWidth + waterfall.options.marginRight)  / (waterfall.options.colNum - 1);

			//遍历HTML
			for(var i = 0; i < waterfall.options.colNum; i++){
				col[i] = '<div id="col'+ [i] +'" class="col" style="margin-right:'+ ((i == waterfall.options.colNum - 1) ? 0 : (avgMargin + waterfall.options.marginRight)) +'px"></div>';			
			}
			html = col.join(' ');
			$box.style.width = waterfall.options.viewWidth + 'px';
			$box.innerHTML = html;
		},
		createXHR:function(){
			//判断是否支持XMLHttpRequest
			if(XMLHttpRequest){
				return new XMLHttpRequest();
			}else if(ActiveXObject){
				return new ActiveXObject('MSXML.XMLHttp');//IE6
			}else{
				throw new Error('没有XHR对象');
			}
		},
		getData:function(url,page){
			if(waterfall.options.isAjax){
				waterfall.options.isAjax = false;
				var xhr = waterfall.fn.createXHR();
				xhr.open('get',url + page,true);
				xhr.send(null);
				xhr.onreadystatechange = function(){
					if(xhr.readyState === 4 && xhr.status === 200){
						var data = eval('('+xhr.responseText+')');
						waterfall.fn.fillData(data);
					}else{

					}
				}
			}
		},
		fillData:function(data){
			if(data.success){
				$('loading').style.display = 'none';//隐藏loading
				waterfall.options.isAjax = false;//正在加载中...

				var list = data.data.blogs, links = [];

				//生成结构
				for(var i = 0, len = list.length; i < len; i++){
					var n = i % waterfall.options.colNum, index = -1;//列数取模，高度最小的那一列索引

					//从第二排开始计算
					if(--waterfall.options.firstRowNum < 0){
						waterfall.options.minHeight = Math.min.apply(null,waterfall.options.colHeights),//最小高度
						index = indexOf(waterfall.options.colHeights,waterfall.options.minHeight);//高度最小的那一列索引
					}

					var m = (index > -1) ? index : n;
					waterfall.options.colHeights[m] = waterfall.options.colHeights[m] ? waterfall.options.colHeights[m] + list[i].iht : list[i].iht;//最小高度那一列高度累加
					
					//生成砖块
					var a = document.createElement('a');
					a.style.height = list[i].iht + 'px';
					a.setAttribute('alt', waterfall.options.images++);
					$('col'+ m).appendChild(a);

					links[i] = a;
				}

				//加载图片
				for(var i = 0, len = links.length; i < len; i++){
					loadImg(links[i],list[i]);
				}
				
				waterfall.options.isAjax = true;
			}	
		}
	}
	
	window.onscroll = function(){
		if((document.body.scrollTop || document.documentElement.scrollTop) + document.documentElement.clientHeight + 200 >= document.body.scrollHeight && waterfall.options.isAjax){
			$('loading').style.display = 'block';
			console.log('page='+waterfall.options.page);
			waterfall.fn.getData(url,++waterfall.options.page);
		}
	}

	function $(id){
		return document.getElementById(id);
	}

	//加载图片
	function loadImg(a,item){
		var img = new Image();
		img.onload = function(){
			a.appendChild(this);
		}
		img.src = item.isrc;
	}

	//fadeIn
	function unlimitedCallback(elem,callback,args){
		var i = 0;
		(function(i){
			elem.style.opacity = ++i;
			if(i <= 100){
				setTimeout(arguments.callee,20);
			}else{
				callback.apply(null,args);
			}
		})(i);
	}

	//获取滚动条宽度
	function getScrollWidth(){
		var noScrollWidth, scrollWidth,
		div = document.createElement('div');
		div.style.cssText = 'position:absolute;left:-9999px;width:50px;height:50px;';
		noScrollWidth = document.body.appendChild(div).clientWidth;
		div.style.overflowY = 'scroll';
		scrollWidth = div.clientWidth;
		document.body.removeChild(div);
		return noScrollWidth - scrollWidth;
	}

	//根据值获取数组索引
	var indexOf = Array.prototype.indexOf 
    ? function(){
        var args = Array.prototype.slice.call(arguments, 1);
        return Array.prototype.indexOf.apply(arguments[0], args);
    }
    : function (arr, obj, fromIndex) {
        if (fromIndex == null) {
            fromIndex = 0;
        } else if (fromIndex < 0) {
            fromIndex = Math.max(0, arr.length + fromIndex);
        }
        for (var i = fromIndex; i < arr.length; i++) {
            if (arr[i] === obj){
                return i;
            }
        }
        return -1;
    };

    waterfall.init();
})();