瀑布流

	样式：
	*{margin:0;padding:0;}
	#content{
	width:960px;
	margin: 30px auto;
	position: relative;
	}
	#content>div{
	width: 228px;
	border: 1px solid #000;
	}
	#content>div>img{
	width: 100%;
	}
、	布局
	<div id="content">
	<!-- <div>
	<img src="img/1.jpg">
	<p>月亮很亮，亮也没用，没有也亮，我喜欢你，喜欢没用，没用也喜欢</p>
	</div> -->
	</div>
	首先生成div，把图片装进去
	var str = "";
	for(var i=0;i<70;i++){
	str+=`<div>
	<img src="img/${i+1}.jpg">
	<p>月亮很亮，亮也没用，没有也亮，我喜欢你，喜欢没用，没用也喜欢</p>
	</div>`
	}
	var oCon = document.getElementById("content");
	oCon.innerHTML = str;
	//等待所有资源加载完毕以后
	window.onload =function (argument) {
	var aDiv = document.querySelectorAll("#content>div");
	var iHeight = []
	//第一步定义4列
	for(var i=0;i<4;i++){
	aDiv[i].style.position = "absolute";
	aDiv[i].style.top = 0;
	aDiv[i].style.left = 230*i+10*i+"px";
	iHeight[i] = aDiv[i].offsetHeight;
	}
	//第三步：在最短的那一列添加div
	for(var i=4;i<aDiv.length;i++){
	var index = getIndex(iHeight);
	aDiv[i].style.position = "absolute";
	aDiv[i].style.top = iHeight[index]+10+"px";
	aDiv[i].style.left = 230*index+index*10+"px";
	iHeight[index] = iHeight[index] + aDiv[i].offsetHeight+10;
	}
	//第二步：算出前四列里最短的一列，将最短的一列找出来
	function getIndex(arr){
	var min = arr[0];
	var index = 0;
	for(var i=0;i<arr.length;i++){
	if(min>arr[i]){
	min = arr[i];
	index = i;
	}
	}
	return index;
	}
	}
	/*
	1、定列 计算每列的高度
	2、查找出最小的高度
	3、往最小的高度那一列插入图片
	4、改变数组中每列的高度
	5、查找出最小的高度
	.....