干货：常见的网页上的瀑布流

三种写法：

1.最简单的(用ul来限定)：

css部分：

ul{margin: 0 10px;padding: 0;list-style: none;width: 200px;border:1px solid purple;float: left;}

ul li{background: grey;margin-bottom: 10px;font-size: 50px;text-align: center;color: white;}

body部分：

<ul></ul><ul></ul><ul></ul><ul></ul>.....ul的数量自己设置，高兴就好。

js部分：

var uls = document.getElementsByTagName('ul');

for (var i = 0; i < 20; i++) {

var li = document.createElement("li");

li.style.height = parseInt(Math.random()*100+50)+"px";

var min = 0;

// 找最小值下标

for (var j = 1; j < uls.length; j++) {

if(uls[min].offsetHeight>uls[j].offsetHeight){min=j;}

}

li.innerHTML = i;

uls[min].appendChild(li);

}

2.稍微复杂一点的写法(不能用ul限定)

css部分：

.box{width: 830px;border:1px solid purple;position: relative;height: ;}

.box div{width: 200px;position: absolute;background: grey;font-size: 50px;text-align:center;color: white;}

body部分：

<div class="box"></div>

备注：box下的div是js内部后期创建的

js部分：

var box = document.getElementsByClassName('box')[0];

var heightArr = [0,0,0,0];

for (var i = 0; i < 20; i++) {

var div = document.createElement("div");

div.style.height = parseInt(Math.random()*100+50)+"px";

var minIndex = 0;

for (var j = 1; j < heightArr.length; j++) {

if(heightArr[minIndex]>heightArr[j]){minIndex = j;}

}

div.innerHTML = i;

div.style.left = minIndex*210+"px";

div.style.top = heightArr[minIndex]+"px";

box.appendChild(div);

heightArr[minIndex]+=(div.offsetHeight+10);

box.style.height = heightArr[minIndex]+150+"px";

}

3.最常用，最关键的图片瀑布流：

css部分：

.box{width: 830px;border:1px solid purple;position: relative;}

.box img{width: 200px;position: absolute;}//为了做出效果，图片设置一样宽。

body部分：

<div class="box"></div>

js部分：

var box = document.getElementsByClassName('box')[0];

var heightArr = [0,0,0,0];

var i = 0;

createImg();

function createImg() {

var img = document.createElement("img");

img.src = "img/p_0"+i+".jpg";//逐个获取img文件夹下的图片

i++;

var minIndex = 0;

for (var j = 1; j < heightArr.length; j++) {

if(heightArr[minIndex]>heightArr[j]){minIndex = j;}

}

img.style.left = minIndex*210+"px";

img.style.top = heightArr[minIndex]+"px";

box.appendChild(img);

// onload 代表图片加载完成之后执行的函数

img.onload = function(){

heightArr[minIndex]+=(img.offsetHeight+10);

if(i<16){createImg();}

}

知识延伸：

// 图片加载出错执行的函数

img.onerror = function(){

console.log("图片加载出错了");

}

// 图片被终止加载/放弃加载图片 执行的函数

img.onabort = function(){

console.log("握不住的沙，就扬了它");

}

// box.style.height = heightArr[minIndex]+150+"px";

}