瀑布流

就是将用户上传的图片一列一列显示在页面上，但是每张图片的高度可能不一样，我们是往最矮的那个列表添加图片

Html

只要有一个容器div就可以了

Css

图片宽度要一样，设置ul浮动

Js

根据窗口的宽度和图片的宽度确认列表的数目，设置一个储存列高度的数组，给每一个列初始化一个为0，根据数据的个数创建li，将图片放进去，取出高度数组中最小的索引值向这个列表添加图片，更新数组列表，我们的视口高度+页面被卷上去的高度大于的高度数组中的最小值，就加载图片

Js

var datas = [
        {"src": "img/1.jpg", "height": 288},
        {"src": "img/2.jpg", "height": 288},
        {"src": "img/3.jpg", "height": 288},
        {"src": "img/4.jpg", "height": 129},
        {"src": "img/5.jpg", "height": 284},
        {"src": "img/1.jpg", "height": 253},
        {"src": "img/2.jpg", "height": 245},
        {"src": "img/3.jpg", "height": 343},
        {"src": "img/3.jpg", "height": 238},
        {"src": "img/4.jpg", "height": 159},
        {"src": "img/5.jpg", "height": 289},
        {"src": "img/5.jpg", "height": 127},
        {"src": "img/2.jpg", "height": 282},
        {"src": "img/3.jpg", "height": 144},
        {"src": "img/4.jpg", "height": 269},
        {"src": "img/1.jpg", "height": 282},
        {"src": "img/2.jpg", "height": 142},
        {"src": "img/1.jpg", "height": 279},
        {"src": "img/3.jpg", "height": 289},
        {"src": "img/4.jpg", "height": 262},
        {"src": "img/5.jpg", "height": 274},
        {"src": "img/1.jpg", "height": 288},
        {"src": "img/1.jpg", "height": 288},
        {"src": "img/3.jpg", "height": 288},
        {"src": "img/1.jpg", "height": 129},
        {"src": "img/3.jpg", "height": 284},
        {"src": "img/4.jpg", "height": 253},
        {"src": "img/5.jpg", "height": 245},
        {"src": "img/1.jpg", "height": 343},
        {"src": "img/2.jpg", "height": 238},
        {"src": "img/3.jpg", "height": 159},
        {"src": "img/1.jpg", "height": 289},
        {"src": "img/2.jpg", "height": 127},
        {"src": "img/3.jpg", "height": 282},
        {"src": "img/4.jpg", "height": 144},
        {"src": "img/5.jpg", "height": 269},
        {"src": "img/1.jpg", "height": 282},
        {"src": "img/5.jpg", "height": 142},
        {"src": "img/4.jpg", "height": 279},
        {"src": "img/3.jpg", "height": 289},
        {"src": "img/2.jpg", "height": 262},
        {"src": "img/1.jpg", "height": 274}
    ];
//兼容每个浏览器的视口的宽度和高度
function myClient(){
	return {
		width:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0,
		height:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0
	}
}
//兼容每个浏览器支持的页面被卷曲的高度和宽度
function myScroll(){
	return {
        scrollTop:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,
        scrollLeft:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0
	}
}
//确定列表数目
var box=document.getElementById("box");
var listNum=parseInt((myClient().width-17)/200);
var lists=box.getElementsByTagName("ul");
console.log(lists)
var ul;
var heightArr=[];
for(var i=0;i<listNum;i++){
	ul=document.createElement("ul");
	box.appendChild(ul);
	heightArr[i]=0;
}
createPic(datas);
//求一组数中的最小值
function getMin(arr){
	var minValue=arr[0];
	var minIndex=0;
	for(var i=0;i<arr.length;i++){
		if(minValue>arr[i]){
			 minValue=arr[i];
			 minIndex=i;
		}
	}
	return {
		index:minIndex,
		value:minValue
	}
}

//根据datas对象个数创建li
function createPic(datas){
	for(var i=0;i<datas.length;i++){
		var li=document.createElement("li");
		li.innerHTML="<img src="+datas[i].src+">";
		var minIndex=getMin(heightArr).index;
		lists[minIndex].appendChild(li);
		heightArr[minIndex]+=datas[i].height;
	}
}
window.onscroll=function(){
	var minVal=getMin(heightArr).value;
	if(myClient().height+myScroll().scrollTop>minVal){
		createPic(datas);
	}
}

Html

<div id="box"></div>

Css

*{
	margin:0;
	padding:0;
	font-size:0;
}
img{
	width:200px;
}
#box ul{
	float:left;
}