参考文章(2条消息) 瀑布流布局_盖玥希圈外男友(섭소우)的博客-CSDN博客
直接粘贴自己的代码了,因为参考文章里面作者已经讲的很清楚了,只是有一些判断方式不一样而已,修改了一下自己循环的条件判断。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container {
width: 700px;
height: 600px;
background-color: red;
/* overflow: auto; */
margin: 0 auto;
display: flex;
align-items: flex-start
}
.col {
flex-basis: 350px;
}
.col img {
width: 100%;
}
</style>
<body>
<div class="container">
<div class="left col">
<!-- <img src="./案例/特斯拉改色/微信图片_20220516162017.jpg" alt=""> -->
</div>
<div class="right col"></div>
</div>
</body>
<!-- 我的代码 -->
<script>
let container = document.getElementsByClassName('container')
let left = document.getElementsByClassName('col')[0]
let right = document.getElementsByClassName('col')[1]
// 加载第index张图片
function loadIndexImg(index) {
return new Promise((resolve, reject) => {
// 当前加载的图片
let img = new Image();
img.src = "./案例/特斯拉改色/" + index + '.jpg'
img.onload = () => {
if (left.clientHeight == 0) {
// console.log(1);
left.appendChild(img)
} else if (left.clientHeight >= right.clientHeight) {
// console.log(2);
right.appendChild(img)
} else if (left.clientHeight < right.clientHeight) {
// console.log(3);
left.appendChild(img)
} else {
left.appendChild(img)
}
resolve();
}
})
}
// 插入图片
async function initImg() {
// 要在加载完并插入图片后才去判断下一张,因此采用async/await
for (let i = 1; i <= 14; i++) {
await loadIndexImg(i)
}
}
initImg()
</script>
<!-- 参考文件代码修改了一部分 已注释 -->
<!-- <script>
let container = document.getElementsByClassName('container')
let left = document.getElementsByClassName('col')[0]
let right = document.getElementsByClassName('col')[1]
// 插入图片
function initImg() {
for (let i = 1; i < 14; i++) {
let img = new Image();
img.src = "./案例/特斯拉改色/" + i + '.jpg'
console.log('left', left.clientHeight);
console.log('right', right.clientHeight);
// if (left.clientHeight >= right.clientHeight) {
// left.appendChild(img)
// } else {
// right.appendChild(img)
// }
// right.appendChild(img)
if (left.clientHeight == 0) {
// console.log(1);
left.appendChild(img)
} else if (left.clientHeight >= right.clientHeight) {
// console.log(2);
right.appendChild(img)
} else if (left.clientHeight < right.clientHeight) {
// console.log(3);
left.appendChild(img)
} else {
left.appendChild(img)
}
}
}
initImg()
</script> -->
</html>
下次在微信小程序里面修改了在看一下有没有问题