<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
900px;
margin: 0 auto;
display: flex;
justify-content: space-around;
}
ul li {
200px;
/* min-height: 500px; */
background-color: pink;
}
ul li img {
200px;
margin-bottom: 10px;
display: block;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
// 数组，存储100张图片的地址
var arr = new Array(100).fill(0).map((item, index) => `imgs/${index}.png`).sort(a => Math.random() < 0.5 ? 1 : -1);
// 获取所有的li
var lis = document.getElementsByTagName('li');
// 数组的每一个成员代表一个li的高度
var height_arr = [0, 0, 0, 0];
// 向页面中，渲染图片
arr.forEach(url => {
// 加载图片
var img = new Image();
// 哪个li矮，向哪个li插入图片
// 图片加载之后就知道图片的高度
img.onload = function() {
// 图片等比例缩放： 图片真实宽高比与li中图片宽高比是一样的
// img.width / img.height = li(img.width) / li(img.height)
var height = 200 * img.height / img.width;
// 获取最矮li的序号
var index = getMin(height_arr, 4);
// 向页面中渲染图片
lis[index].appendChild(img);
// 更新高度, 图片有底边的边距是10
height_arr[index] += height + 10;
}
// 设置地址
img.src = url;
})
// 实现获取最矮li的方法
function getMin(arr, num) {
// 默认第一个li最矮
let index = 0;
// 第一个成员高度
let height = arr[0];
// 比较数组每一个成员的高度
for (var i = 0; i < num; i++) {
// 第i个成员，高度比当前的还要小呢
if (height > arr[i]) {
// 更新最小高度，以及索引值了
index = i;
height = arr[i];
}
}
// 返回索引值
return index;
}
</script>
</body>
</html>