<!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/01.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/02.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/03.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/04.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/05.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/06.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/07.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/08.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/09.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/10.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/11.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/12.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/13.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/14.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/15.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/16.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/17.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/18.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/19.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/20.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/21.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/22.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/23.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/24.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/25.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/26.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/27.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/28.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/29.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/30.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/31.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/32.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/33.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/34.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/35.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/36.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/37.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/38.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/39.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/40.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/41.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/42.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/43.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/44.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/45.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/46.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/47.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/48.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/49.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/50.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/51.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/52.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/53.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/54.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/55.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/56.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/57.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/58.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/59.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/60.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/61.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/62.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/63.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/64.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/65.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/66.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/67.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/68.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/69.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/70.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/71.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/72.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/73.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/74.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/75.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/76.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/77.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/78.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/79.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/80.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/81.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/82.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/83.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/84.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/85.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/86.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/87.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/88.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/89.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/90.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/91.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/92.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/93.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/94.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/95.webp" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/96.webp" 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>JavaScript實現(xiàn)圖片瀑布流
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- 瀑布流現(xiàn)在基本上是圖片顯示網(wǎng)頁的標配，主要是為了適配圖片和文字塊的大小，使顯示出的效果沒有那么呆板實現(xiàn)這個功能首先...
- 好久沒寫技術(shù)博客了，最近遇到一個需求瀑布流方式實現(xiàn)商品詳情展示，并且圖片尺寸各種各樣都有，且后端不返回圖片尺寸，這...
- 最近在做一個小程序項目，在 UI 上借鑒了一下其他 App 設(shè)計，其中有一個圖片橫向布局鋪滿的 UI 感覺挺好看的...
- 開篇 這是我在簡書上寫的第一篇博客。非常喜歡簡書的風(fēng)格，所以想在這里寫下我Android之路所遇到的一些麻煩，和我...
