网页瀑布效果

<!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: 100%;
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: 190px;
height: auto;
border-radius: 8px;
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="container">
<div class="outer">
<div class="inner"><img class="img" src="./images/img(01).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(02).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(03).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(04).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(05).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(06).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(07).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(08).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(09).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(10).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(11).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(12).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(13).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(14).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(15).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(16).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(17).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(18).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(19).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(20).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(21).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(22).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(23).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(24).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(25).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(26).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(27).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(28).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(29).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(30).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(31).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(32).jpeg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img class="img" src="./images/img(33).jpeg" 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")
//console.log(imgs)
let arr = []
for(let i = 0;i < imgs.length;i++){
if(i<cols){
imgs[i].style.top = 0
imgs[i].style.left = i210+"px"
arr.push(imgs[i].offsetHeight)
//console.log(arr)
}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>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容