demo/pu-bu-liu/level2.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>瀑布流demo</title>
	<style>
		*{margin: 0;padding: 0;}
		.waterfall{margin: 10px auto;position: relative;}
		.waterfall .flow{background: #000;position: absolute;border:1px solid #ccc;box-shadow: #ccc 2px 3px 3px;font-size:42px;color: #fff;text-align: center;}
		.flowItem{width:100%;}
		#add{position: fixed;left:0;bottom:40px;}
	</style>
</head>
<body>
		<div class="waterfall" id="waterfall">
		    <div class="flow"><div class="flowItem" style="height: 100px;">1</div></div>
		    <div class="flow"><div class="flowItem" style="height: 200px;">2</div></div>
		    <div class="flow"><div class="flowItem" style="height: 150px;">3</div></div>
		    <div class="flow"><div class="flowItem" style="height: 400px;">4</div></div>
		    <div class="flow"><div class="flowItem" style="height: 180px;">5</div></div>
		    <div class="flow"><div class="flowItem" style="height: 120px;">6</div></div>
		    <div class="flow"><div class="flowItem" style="height: 300px;">7</div></div>
		    <div class="flow"><div class="flowItem" style="height: 100px;">8</div></div>
		    <div class="flow"><div class="flowItem" style="height: 120px;">9</div></div>
		    <div class="flow"><div class="flowItem" style="height: 105px;">10</div></div>
		    <div class="flow"><div class="flowItem" style="height: 180px;">11</div></div>
		    <div class="flow"><div class="flowItem" style="height: 120px;">12</div></div>
		    <div class="flow"><div class="flowItem" style="height: 300px;">13</div></div>
		    <div class="flow"><div class="flowItem" style="height: 100px;">14</div></div>
		    <div class="flow"><div class="flowItem" style="height: 120px;">15</div></div>
		    <div class="flow"><div class="flowItem" style="height: 105px;">16</div></div>
		</div>

		<button id="add">add</button>

		<script>

			function Waterfall(opt){
				this.parent = opt.parent;//父容器
				this.flowItems = opt.flowItems,//元素列表
				this.pin = opt.pin;// 总列数
				this.width = opt.width || 400; // 元素的宽度
				this.horizontalMargin = opt.horizontalMargin || 15; // 元素的水平间距
				this.verticalMargin = opt.verticalMargin || 15; // 元素的垂直间距
				this.columnList = new Array(this.pin);// 列高度存储的容器
			}
			Waterfall.prototype.calculate = function(){
				for(var i = 0, pinLen = this.columnList.length; i < pinLen; i++){
					//计算每一列高度的初始值
					this.columnList[i] = this.flowItems[i].offsetTop + this.flowItems[i].offsetHeight;
				}

				for(var i = 0, len = this.flowItems.length; i < len; i++){
					
					this.flowItems[i].style.width = this.width + 'px';//每个元素的宽度
					if(i >= this.pin){
						var minH = Math.min.apply(null,this.columnList);//取出高度最小列
						var minHIndex = this.columnList.indexOf(minH);//然后找到索引值
						this.flowItems[i].style.left = minHIndex * (this.width + this.horizontalMargin) + 'px';
						this.flowItems[i].style.top = minH + this.verticalMargin + 'px';
						this.columnList[minHIndex] += this.flowItems[i].offsetHeight + this.verticalMargin;//计算完后 要更新每列的高度
					}else if(i < this.pin){
						// 这里设置第一行的元素（第一行距离容器顶部为0）
						this.flowItems[i].style.top = 0;
						this.flowItems[i].style.left = (i % this.pin) * (this.width + this.horizontalMargin) + 'px';
					}
				}

				this.parent.style.width = this.pin * this.width + (this.pin - 1) * this.horizontalMargin + 'px';
			}
			Waterfall.prototype.update = function(data){// 更新数据
				var docFragment = document.createDocumentFragment();
				for(var i = 0, len = data.list.length; i < len; i++){
					var div = document.createElement('div');
					div.style.width = this.width + 'px';//每个元素的宽度
					div.style.height = data.list[i] + 'px';//新增元素的高度
					div.innerHTML = 'new' + i;
					div.className = 'flow';

					var minH = Math.min.apply(null,this.columnList);//取出高度最小列
					var minHIndex = this.columnList.indexOf(minH);//然后找到索引值

					div.style.left = minHIndex * (this.width + this.horizontalMargin) + 'px';
					div.style.top = minH + this.verticalMargin + 'px';
					this.columnList[minHIndex] += data.list[i] + this.verticalMargin;//计算完后 要更新每列的高度
					docFragment.appendChild(div);
				}
				
				waterfallParent.appendChild(docFragment);

			}

			Waterfall.prototype.init = function(){
				this.calculate();
			}

			var waterfallParent = document.getElementById('waterfall');
			var flowItems = waterfall.querySelectorAll('.flow');

			var cuttentFlow = {
				parent : waterfallParent,//父容器
				flowItems : flowItems,//子元素集合
				pin : 4,//列数
				width : 400,//每个元素宽度
				horizontalMargin : 15,//元素水平距离
				verticalMargin : 15//元素垂直距离
			};
			var water = new Waterfall(cuttentFlow);
			water.init();

			// 模拟更新的数据
			var data = {
				list : [120,260,452,120]
			};

			document.getElementById('add').onclick = function(){
				water.update(data);
			}


		</script>
</body>
</html>