瀑布流

*{
				margin:0;
				padding:0;
			}
			#outer{
				1000px;
				margin:0 auto;
				overflow:hidden;
			}
			#outer div{
				250px;
				float:left;
			}
			#outer div img{
				220px;
				margin:0 auto;
				border:1px solid black;
			}

　　

<div id="outer">
			<div class="cell">
			
			</div>
			<div class="cell">
				
			</div>
			<div class="cell">
				
			</div>
			<div class="cell">
				
			</div>
		</div>

　　

<script type="text/javascript">
			var outer = document.getElementById("outer");
			var cell = document.getElementsByClassName("cell");
			var min = 0;
			var x=0;
			var imgArr = ["img/0.jpg","img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg","img/9.jpg","img/10.jpg"];		
			for(var i = 0;i<22;i++){
				var num = i;			
				if(i>10){
					num = i-11;
				}
				var oImg = document.createElement("img");
				oImg.src = imgArr[num];
				for(var j=0;j<cell.length;j++){
					x++;
					if(parseInt(cell[min].offsetHeight)>parseInt(cell[j].offsetHeight)){
						min = j;
					}
					console.log(cell[min].offsetHeight)
				}
				cell[min].appendChild(oImg);
			}
		</script>