<style>*{ 	margin:0; 	padding:0;}	.waterfall_item{	border:solid 3px #ccc;	box-shadow:1px 1px 3px #eee;	border-radius:8px;	font:normal 12px/22px ‘Microsoft yahei‘;	text-align: center;	padding: 20px 0;	overflow: hidden;}</style><script>/**	瀑布流	分析：		瀑布流主要解决各个列的各元素的位置，以及各列的高度问题*//**	瀑布流	分析：				瀑布流主要解决各个列的各元素的位置，以及各列的高度问题	确定一行有几列，每个元素之间的间隔大小。	获取各元素的高度，添加到面板，并确定每列的高度	属性：		panel//画板		items//要加载的项目		colNum//列数		col=[]//列数组		colLeft// 左间距		colTop// 上间距	方法:		init//初始化		refresh//刷新		setColNum//设置列数		setColLeft//设置左间距		setColTop//设置上间距		paint//添加到外框		refreshPanel//更新外部画板		*/function getStyle(o,name){	if(document.defaultView&&document.defaultView.getComputedStyle)		return document.defaultView.getComputedStyle(o,null)[name];	else		return o.currentStyle[name];}function waterfall(opts){	this.init(opts);	}waterfall.prototype={	constructor:waterfall,	init:function(opts){		this.panel=opts.panel||document.body;//画板		this.items=opts.items||[];//要加载的项目		this.colNum=opts.colNum||3;//列数		this.colLeft=opts.colLeft||5;//左间距		this.colTop=opts.colTop||5;// 上间距		this._updated=false;		this.col=[];		this.initCol();		this.newItems=this.items;		this.draw(this.newItems);	},	initCol:function(){		//初始化列数组		for(var i=0,len=this.colNum;i<len;i++){			this.col[i]={				height:0,//高度				itemNum:0,//项目数				idx:i,				count:0			}		}			},	refresh:function(type){		var items;		if(this._updated){			if(type!==‘append‘){				this.initCol();				this.panel.innerHTML=‘‘;				items=this.items;			}else{				items=this.newItems;				}			this.draw(items);		}	},	_setUpdate:function(updated){		if(this._updated!=updated){			this._updated=updated;		}	},	setColNum:function(num){		if(num==this.colNum)return;		this._setUpdate(true);		this.colNum=num;	},	setColLeft:function(leftSpan){		this._setUpdate(true);		this.colLeft=leftSpan;	},	setColTop:function(topSpan){		this._setUpdate(true);		this.colLeft=leftSpan;		},	addItems:function(items){		this._setUpdate(true);		this.items=this.items.concat(items);		this.newItems=items;	},	draw:function(items){		var that=this,			i=0,			p=this.panel,			len=items.length;		for(;i<len;i++){			var r=Math.floor(i/this.colNum);			var w=parseInt(getStyle(p,‘width‘))/this.colNum-this.colLeft;						var curCol=this.getMinHeightCol();			var c=curCol.idx;			var t=curCol.height+this.colTop;			var l=c*(w+this.colLeft)+this.colLeft;					var oitem=this.createItem(w,l,t,items[i]);			p.appendChild(oitem);			var itemH=oitem.offsetHeight;			curCol.height=curCol.height+itemH+this.colTop;			curCol.count++;			p.style.height=curCol.height+‘px‘;		}	},	createItem:function(w,l,t,html){		var oitem=document.createElement(‘div‘);		oitem.innerHTML=html;		oitem=oitem.firstChild;		oitem.style.position=‘absolute‘;		oitem.style.width=w+‘px‘;		oitem.style.left=l+‘px‘;		oitem.style.top=t+‘px‘;		return oitem;	},	getMinHeightCol:function(){		var idx=0,minner=this.col[idx].height;		for(var i=0,len=this.colNum;i<len;i++){						if(minner>this.col[i].height){								minner=this.col[i].height;				idx=i;										}							}		return this.col[idx];	}}</script><div style="margin:0 auto">列：<input type="text" value=http://www.mamicode.com/‘3‘ id="col_num" /><button id="refresh">刷新</button></div><div id="response_flow" class="response_flow"  style="width:1000px;position:relative;">	</div><script>//测试用例var items=[		   "<div class=‘waterfall_item‘><img src=http://www.mamicode.com/‘http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg‘ height=‘100‘ style=‘height:100px;‘ />
asdfasdfasdf