<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul, li {
list-style: none;
box-sizing: border-box;
}
ul {
/* 600px; */
border: 5px solid silver;
border-radius: 8px;
margin: 0 auto;
padding: 15px;
display: flex;
}
li {
200px;height: 300px;
background-color: rgb(0, 162, 255);
padding: 10px;
}
li>div {
text-align: center;
font-size: 50px;
color: white;
}
</style>
</head>
<body>
<ul class="list"></ul>
<script>
var list = document.querySelector(".list");
// 列的数组，列创建完后才赋值
var liArr;
var ha = [];
// 根据当前可视窗口宽度计算列的数量
// 减去margin padding，是li的可用宽度
var bw = document.body.clientWidth - 30 - 20;
// 下舍入，因为能放3.9个实际上会只能放下3个
// 总宽度除当前宽度
var n = Math.floor(bw/200);
// 创建对应个数的列，创建对应的高度数组
for(var i = 0; i < n ; i++){
var newLi = document.createElement("li");
console.log(list);
console.log(newLi);
list.appendChild(newLi);
// ha承接所有列的高度，刚创建时初始高度为0
// 创建几列，push几次
ha.push(0);
}
liArr = document.querySelectorAll("ul li");
// 找到ha数组中最小的元素，确定下标
// function getMinIndex(){
// // 假设ha第一个元素是最小值，把他和其他元素分别比较，如果小于其他值，覆盖
// var min = ha[0];
// for(var j = 0 ; j < ha.length; j++){
// min = min < ha[j] ? min : ha[j];
// }
// // 返回最小值的下标
// return ha.indexOf(min);
// }
// 以上代码比较值，可优化为直接比较索引的值
function getMinIndex(){
var mi = 0;
for(var j =1; j <ha.length;j++){
mi = ha[mi] < ha[j] ? mi : j;
}
return mi;
}
// 封装随机数函数
function rn(a,b){
return Math.round(Math.random()*(b-a)+a);
}
// 创建元素 每个元素添加到当前最短的一列中
for(var x = 0; x < 50; x++){
// 创建元素
var el = document.createElement("div");
// 随机高度，颜色，设置内容
var h = rn(100,200);
var bg = "#" + (Math.random()+ "").substr(2,6);
el.style.height = h + "px";
el.style.background = bg;
el.innerHTML = x;
el.style.lineHeight = h + "px";
// 找到最矮一列下标，添加到对应列
var _mi = getMinIndex();
// 更新ha数组
liArr[_mi].appendChild(el);
// 添加刚加进去的元素的高度
ha[_mi] += h;
}
</script>
</body>
</html>