瀑布流效果图
image.png
联想截图_20250429170034.png
总结
效果炫酷，但是图片文件名如果没有规律该怎么办，改文件名有点麻烦
代码实现
<!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;/*处理公共样式*/
position: relative;
}
.container{
width: 98%;
margin: 0 auto;
}
.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;
vertical-align: bottom;/*垂直居中，底部对齐，图片特有的样式*/
border-radius: 5px;
}
</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>
<script>
//封装函数，实现布局
function loadImgs(){
//获取容器的宽度()
let container = document.querySelector(".container")
let c_width = container.offsetWidth
console.log(c_width)
//计算一行能放几张图片
let cols = Math.floor(c_width/210)
console.log(cols)
//循环放置图片，获取所有的图片
let imgs =document.querySelectorAll(".outer")
//声明一个数组，记录高度
let arr =[]
console.log(imgs)
for(let i=0;i<imgs.length;i++){
//放置第一行图片
if(i<cols){
console.log(imgs[i])
imgs[i].style.top=0
imgs[i].style.left=i*210+"px"
//记录图片的高度
arr.push(imgs[i].offsetHeight)
console.log(arr)
}
//放置其他图片
else{
//1,获取最小高度和它的编号
let minHeight = Math.min(...arr)
let minIndex = arr.indexOf(minHeight)
console.log(minHeight,minIndex)
//2.放置图片
imgs[i].style.top = minHeight+"px"
imgs[i].style.left = minIndex*210+"px"
//3.更新高度:原来的高度+新的高度
arr[minIndex]= minHeight+imgs[i].offsetHeight
}
}
}
//windown中onload事件，指等网页中所有的数据加载完成后执行
window.onload =function(){
//调用函数，放置图片
loadImgs()
}
//window中onresize,主要是监听浏览器窗口是否发生了调整
window.onresize=function(){
//当窗口大小变化后，重新调整图片
loadImgs()
}
</script>
</body>
</html>