我的瀑布流作业，代码：
<!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;
box-sizing: border-box;
}
.container{
width:98%;
margin: 0 auto;
position:relative;
}
.outer{
position:absolute;
width:210px;
height:auto;
padding:5px;
transition: .5s all;
}
.inner{
border:solid 1px #333;
border-radius:8px;
padding:5px;
}
img{
width:188px;
height:auto;
border-radius:5px;
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="container">
<div class="outer">
<div class="inner"><img src="./images/img (1).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (2).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (3).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (4).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (5).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (6).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (7).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (8).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (9).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (10).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (11).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (12).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (13).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (14).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (15).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (16).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (17).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (18).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (19).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (20).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (21).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (22).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (23).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (24).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (25).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (26).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (27).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (28).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (29).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (30).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (31).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (32).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (33).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (34).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (35).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (36).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (37).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (38).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (39).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (40).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (41).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (42).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (43).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (44).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (45).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (46).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (47).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (48).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (49).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (50).jpg" alt=""></div>
</div>
</div>
</div>
<script>
function loadImgs() {
let container = document.querySelector(".container")
let c_width = container.offsetWidth
let cols = Math.floor(c_width / 210)
let imgs = document.querySelectorAll(".outer")
let arr = []
for(let i = 0; i < imgs.length; i++) {
if(i < cols) {
imgs[i].style.top = 0
imgs[i].style.left = i * 210 + "px"
arr.push(imgs[i].offsetHeight)
} else {
let minHeight = Math.min(...arr)
let minIndex = arr.indexOf(minHeight)
// console.log(minHeight, minIndex)
imgs[i].style.top = minHeight + "px"
imgs[i].style.left = minIndex * 210 + "px"
arr[minIndex] = minHeight + imgs[i].offsetHeight
}
}
}
window.onload = function() {
loadImgs()
}
window.onresize = function() {
loadImgs()
}
</script>
</body>
</html>
页面效果
