<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布流</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" style="top: 0px; left: -210px;">
<div class="inner"><img src="./images/img (1).jpg" alt=""></div>
</div>
<div class="outer" style="top: 0px; left: -210px;">
<div class="inner"><img src="./images/img (2).jpg" alt=""></div>
</div>
<div class="outer" style="top: 139px; left: -210px;">
<div class="inner"><img src="./images/img (3).jpg" alt=""></div>
</div>
<div class="outer" style="top: 266px; left: -210px;">
<div class="inner"><img src="./images/img (4).jpg" alt=""></div>
</div>
<div class="outer" style="top: 356px; left: -210px;">
<div class="inner"><img src="./images/img (5).jpg" alt=""></div>
</div>
<div class="outer" style="top: 405px; left: -210px;">
<div class="inner"><img src="./images/img (6).jpg" alt=""></div>
</div>
<div class="outer" style="top: 544px; left: -210px;">
<div class="inner"><img src="./images/img (7).jpg" alt=""></div>
</div>
<div class="outer" style="top: 659px; left: -210px;">
<div class="inner"><img src="./images/img (8).jpg" alt=""></div>
</div>
<div class="outer" style="top: 848px; left: -210px;">
<div class="inner"><img src="./images/img (9).jpg" alt=""></div>
</div>
<div class="outer" style="top: 865px; left: -210px;">
<div class="inner"><img src="./images/img (10).jpg" alt=""></div>
</div>
<div class="outer" style="top: 1010px; left: -210px;">
<div class="inner"><img src="./images/img (11).jpg" alt=""></div>
</div>
<div class="outer" style="top: 1219px; left: -210px;">
<div class="inner"><img src="./images/img (12).jpg" alt=""></div>
</div>
<div class="outer" style="top: 1293px; left: -210px;">
<div class="inner"><img src="./images/img (13).jpg" alt=""></div>
</div>
<div class="outer" style="top: 1373px; left: -210px;">
<div class="inner"><img src="./images/img (14).jpg" alt=""></div>
</div>
<div class="outer" style="top: 1440px; left: -210px;">
<div class="inner"><img src="./images/img (15).jpg" alt=""></div>
</div>
<div class="outer" style="top: 1567px; left: -210px;">
<div class="inner"><img src="./images/img (16).jpg" alt=""></div>
</div>
<div class="outer" style="top: 1693px; left: -210px;">
<div class="inner"><img src="./images/img (17).jpg" alt=""></div>
</div>
<div class="outer" style="top: 1857px; left: -210px;">
<div class="inner"><img src="./images/img (18).jpg" alt=""></div>
</div>
<div class="outer" style="top: 1989px; left: -210px;">
<div class="inner"><img src="./images/img (19).jpg" alt=""></div>
</div>
<div class="outer" style="top: 2116px; left: -210px;">
<div class="inner"><img src="./images/img (20).jpg" alt=""></div>
</div>
<div class="outer" style="top: 2161px; left: -210px;">
<div class="inner"><img src="./images/img (21).jpg" alt=""></div>
</div>
<div class="outer" style="top: 2243px; left: -210px;">
<div class="inner"><img src="./images/img (22).jpg" alt=""></div>
</div>
<div class="outer" style="top: 2315px; left: -210px;">
<div class="inner"><img src="./images/img (23).jpg" alt=""></div>
</div>
<div class="outer" style="top: 2370px; left: -210px;">
<div class="inner"><img src="./images/img (24).jpg" alt=""></div>
</div>
<div class="outer" style="top: 2636px; left: -210px;">
<div class="inner"><img src="./images/img (25).jpg" alt=""></div>
</div>
<div class="outer" style="top: 2663px; left: -210px;">
<div class="inner"><img src="./images/img (26).jpg" alt=""></div>
</div>
<div class="outer" style="top: 2872px; left: -210px;">
<div class="inner"><img src="./images/img (27).jpg" alt=""></div>
</div>
<div class="outer" style="top: 2927px; left: -210px;">
<div class="inner"><img src="./images/img (28).jpg" alt=""></div>
</div>
<div class="outer" style="top: 3176px; left: -210px;">
<div class="inner"><img src="./images/img (29).jpg" alt=""></div>
</div>
<div class="outer" style="top: 3283px; left: -210px;">
<div class="inner"><img src="./images/img (30).jpg" alt=""></div>
</div>
<div class="outer" style="top: 3323px; left: -210px;">
<div class="inner"><img src="./images/img (31).jpg" alt=""></div>
</div>
<div class="outer" style="top: 3586px; left: -210px;">
<div class="inner"><img src="./images/img (32).jpg" alt=""></div>
</div>
<div class="outer" style="top: 3586px; left: -210px;">
<div class="inner"><img src="./images/img (33).jpg" alt=""></div>
</div>
<div class="outer" style="top: 3858px; left: -210px;">
<div class="inner"><img src="./images/img (34).jpg" alt=""></div>
</div>
<div class="outer" style="top: 3936px; left: -210px;">
<div class="inner"><img src="./images/img (35).jpg" alt=""></div>
</div>
<div class="outer" style="top: 4067px; left: -210px;">
<div class="inner"><img src="./images/img (36).jpg" alt=""></div>
</div>
<div class="outer" style="top: 4199px; left: -210px;">
<div class="inner"><img src="./images/img (37).jpg" alt=""></div>
</div>
<div class="outer" style="top: 4330px; left: -210px;">
<div class="inner"><img src="./images/img (38).jpg" alt=""></div>
</div>
<div class="outer" style="top: 4462px; left: -210px;">
<div class="inner"><img src="./images/img (39).jpg" alt=""></div>
</div>
<div class="outer" style="top: 4591px; left: -210px;">
<div class="inner"><img src="./images/img (40).jpg" alt=""></div>
</div>
<div class="outer" style="top: 4680px; left: -210px;">
<div class="inner"><img src="./images/img (41).jpg" alt=""></div>
</div>
<div class="outer" style="top: 4759px; left: -210px;">
<div class="inner"><img src="./images/img (42).jpg" alt=""></div>
</div>
<div class="outer" style="top: 4848px; left: -210px;">
<div class="inner"><img src="./images/img (43).jpg" alt=""></div>
</div>
<div class="outer" style="top: 4968px; left: -210px;">
<div class="inner"><img src="./images/img (44).jpg" alt=""></div>
</div>
<div class="outer" style="top: 5057px; left: -210px;">
<div class="inner"><img src="./images/img (45).jpg" alt=""></div>
</div>
<div class="outer" style="top: 5136px; left: -210px;">
<div class="inner"><img src="./images/img (46).jpg" alt=""></div>
</div>
<div class="outer" style="top: 5266px; left: -210px;">
<div class="inner"><img src="./images/img (47).jpg" alt=""></div>
</div>
<div class="outer" style="top: 5430px; left: -210px;">
<div class="inner"><img src="./images/img (48).jpg" alt=""></div>
</div>
<div class="outer" style="top: 5616px; left: -210px;">
<div class="inner"><img src="./images/img (49).jpg" alt=""></div>
</div>
<div class="outer" style="top: 5693px; left: -210px;">
<div class="inner"><img src="./images/img (50).jpg" alt=""></div>
</div>
<div class="outer" style="top: 5956px; left: -210px;">
<div class="inner"><img src="./images/img (51).jpg" alt=""></div>
</div>
<div class="outer" style="top: 5966px; left: -210px;">
<div class="inner"><img src="./images/img (52).jpg" alt=""></div>
</div>
<div class="outer" style="top: 6105px; left: -210px;">
<div class="inner"><img src="./images/img (53).jpg" alt=""></div>
</div>
<div class="outer" style="top: 6312px; left: -210px;">
<div class="inner"><img src="./images/img (54).jpg" alt=""></div>
</div>
<div class="outer" style="top: 6441px; left: -210px;">
<div class="inner"><img src="./images/img (55).jpg" alt=""></div>
</div>
<div class="outer" style="top: 6455px; left: -210px;">
<div class="inner"><img src="./images/img (56).jpg" alt=""></div>
</div>
<div class="outer" style="top: 6744px; left: -210px;">
<div class="inner"><img src="./images/img (57).jpg" alt=""></div>
</div>
<div class="outer" style="top: 6751px; left: -210px;">
<div class="inner"><img src="./images/img (58).jpg" alt=""></div>
</div>
<div class="outer" style="top: 6964px; left: -210px;">
<div class="inner"><img src="./images/img (59).jpg" alt=""></div>
</div>
<div class="outer" style="top: 7054px; left: -210px;">
<div class="inner"><img src="./images/img (60).jpg" alt=""></div>
</div>
<div class="outer" style="top: 7267px; left: -210px;">
<div class="inner"><img src="./images/img (61).jpg" alt=""></div>
</div>
<div class="outer" style="top: 7359px; left: -210px;">
<div class="inner"><img src="./images/img (62).jpg" alt=""></div>
</div>
<div class="outer" style="top: 7406px; left: -210px;">
<div class="inner"><img src="./images/img (63).jpg" alt=""></div>
</div>
<div class="outer" style="top: 7545px; left: -210px;">
<div class="inner"><img src="./images/img (64).jpg" alt=""></div>
</div>
<div class="outer" style="top: 7667px; left: -210px;">
<div class="inner"><img src="./images/img (65).jpg" alt=""></div>
</div>
<div class="outer" style="top: 7754px; left: -210px;">
<div class="inner"><img src="./images/img (66).jpg" alt=""></div>
</div>
<div class="outer" style="top: 7881px; left: -210px;">
<div class="inner"><img src="./images/img (67).jpg" alt=""></div>
</div>
<div class="outer" style="top: 7911px; left: -210px;">
<div class="inner"><img src="./images/img (68).jpg" alt=""></div>
</div>
<div class="outer" style="top: 8050px; left: -210px;">
<div class="inner"><img src="./images/img (69).jpg" alt=""></div>
</div>
<div class="outer" style="top: 8237px; left: -210px;">
<div class="inner"><img src="./images/img (70).jpg" alt=""></div>
</div>
<div class="outer" style="top: 8349px; left: -210px;">
<div class="inner"><img src="./images/img (71).jpg" alt=""></div>
</div>
<div class="outer" style="top: 8376px; left: -210px;">
<div class="inner"><img src="./images/img (72).jpg" alt=""></div>
</div>
<div class="outer" style="top: 8488px; left: -210px;">
<div class="inner"><img src="./images/img (73).jpg" alt=""></div>
</div>
<div class="outer" style="top: 8731px; left: -210px;">
<div class="inner"><img src="./images/img (74).jpg" alt=""></div>
</div>
<div class="outer" style="top: 8838px; left: -210px;">
<div class="inner"><img src="./images/img (75).jpg" alt=""></div>
</div>
<div class="outer" style="top: 9006px; left: -210px;">
<div class="inner"><img src="./images/img (76).jpg" alt=""></div>
</div>
<div class="outer" style="top: 9087px; left: -210px;">
<div class="inner"><img src="./images/img (77).jpg" alt=""></div>
</div>
<div class="outer" style="top: 9255px; left: -210px;">
<div class="inner"><img src="./images/img (78).jpg" alt=""></div>
</div>
<div class="outer" style="top: 9352px; left: -210px;">
<div class="inner"><img src="./images/img (79).jpg" alt=""></div>
</div>
<div class="outer" style="top: 9464px; left: -210px;">
<div class="inner"><img src="./images/img (80).jpg" alt=""></div>
</div>
<div class="outer" style="top: 9481px; left: -210px;">
<div class="inner"><img src="./images/img (81).jpg" alt=""></div>
</div>
<div class="outer" style="top: 9603px; left: -210px;">
<div class="inner"><img src="./images/img (82).jpg" alt=""></div>
</div>
<div class="outer" style="top: 9620px; left: -210px;">
<div class="inner"><img src="./images/img (83).jpg" alt=""></div>
</div>
<div class="outer" style="top: 9757px; left: -210px;">
<div class="inner"><img src="./images/img (84).jpg" alt=""></div>
</div>
<div class="outer" style="top: 9882px; left: -210px;">
<div class="inner"><img src="./images/img (85).jpg" alt=""></div>
</div>
<div class="outer" style="top: 9924px; left: -210px;">
<div class="inner"><img src="./images/img (86).jpg" alt=""></div>
</div>
<div class="outer" style="top: 10063px; left: -210px;">
<div class="inner"><img src="./images/img (87).jpg" alt=""></div>
</div>
<div class="outer" style="top: 10145px; left: -210px;">
<div class="inner"><img src="./images/img (88).jpg" alt=""></div>
</div>
<div class="outer" style="top: 10202px; left: -210px;">
<div class="inner"><img src="./images/img (89).jpg" alt=""></div>
</div>
<div class="outer" style="top: 10341px; left: -210px;">
<div class="inner"><img src="./images/img (90).jpg" alt=""></div>
</div>
<div class="outer" style="top: 10353px; left: -210px;">
<div class="inner"><img src="./images/img (91).jpg" alt=""></div>
</div>
<div class="outer" style="top: 10468px; left: -210px;">
<div class="inner"><img src="./images/img (92).jpg" alt=""></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)
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>
图片效果：
image.png
