三列，每列之间的间隔是10px，每个div高度50-250px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
section.wrapper {
1260px;
margin: 0 auto;
}
section.wrapper:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
section.wrapper div.column {
float: left;
400px;
padding: 10px;
}
.wrapper .waterfall-box {
400px;
margin-bottom: 10px;
background-color: pink;
}
</style>
</head>
<body>
<section class="wrapper">
<div id="div0" class="column"></div>
<div id="div1" class="column"></div>
<div id="div2" class="column"></div>
</section>
<script>
var yArr = [10, 10, 10];
const GAP = 10;
for (var i = 0; i < 8; i++) {
waterfall();
}
function waterfall() {
var height = parseInt(50 + 200 * Math.random());
var box = document.createElement('div');
box.className = 'waterfall-box';
box.style.height = height + 'px';
var minY = findMin(yArr);
yArr[minY.minIndex] += height + GAP;
var div = document.getElementById('div' + minY.minIndex);
div.appendChild(box);
function findMin(arr) {
var minEle,
minIndex;
arr.forEach(function (ele, index, arr) {
if (minEle === undefined || minEle > ele) {
minEle = ele;
minIndex = index;
}
})
return {
minEle: minEle,
minIndex: minIndex
}
}
}
</script>
</body>
</html>