<!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实现图片瀑布流
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
推荐阅读更多精彩内容
- 瀑布流现在基本上是图片显示网页的标配，主要是为了适配图片和文字块的大小，使显示出的效果没有那么呆板实现这个功能首先...
- 好久没写技术博客了，最近遇到一个需求瀑布流方式实现商品详情展示，并且图片尺寸各种各样都有，且后端不返回图片尺寸，这...
- 最近在做一个小程序项目，在 UI 上借鉴了一下其他 App 设计，其中有一个图片横向布局铺满的 UI 感觉挺好看的...
- 开篇 这是我在简书上写的第一篇博客。非常喜欢简书的风格，所以想在这里写下我Android之路所遇到的一些麻烦，和我...
