一起将页面调教为令人欲罢不能的“瀑布”吧！！
前言
页面瀑布流是一种网页布局技术，它允许用户在浏览网页时，像瀑布一样不断向下滚动，新的内容会自动加载，而无需手动刷新页面。这种设计使得用户可以连续不断地浏览内容，提高了用户体验。
- 无限滚动：用户可以无限地向下滚动页面，新的内容会自动加载。
- 动态加载：当用户滚动到页面底部时，新的数据块会自动加载，无需刷新整个页面。
- 用户体验：瀑布流设计提供了一种流畅且直观的浏览体验，用户可以轻松地浏览大量内容
是不是感觉每每使用这些app的时候总能有一直刷下去的想法呢？因为他们的页面总是参差不齐，下面的内容总是呼之欲出的感觉，一直在挑逗着你让你不断向下刷
正文
【敲代码的思路】
1.敲出HTML前端代码，放入你爱的许多照片并将他们设置为等宽同行放置
2.开始编写JavaScript代码，获取屏幕宽度，获取图片的宽度，操作第n+1张，摆放他的位置，放在高度最小的那一列 获取每一列的高度更新这一列的高度
一、HTML文件的编写
1、我们插入图片再，定义一个容器来装图片，
2、让图片同行显示。
3、让图片等宽img标签设置width:100%; 。
4、根据自己的喜好来设置页面的阴影和边距。（代码如下）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./index.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#container{
position: relative;
}
.box{
float:left;
padding-left: 5px;
}
.box-img{
width: 150px;
padding: 5px;
}
img{
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<div class="box-img">
<img src="./Photo/IMG_0202.JPG" alt="" class="">
</div>
</div>
//更多图片就省略了。。。。。。。。。。。。。。。。。。。。
<div class="box">
<div class="box-img">
<img src="./Photo/IMG_2455.JPG" alt="" class="">
</div>
</div>
</div>
</body>
</html>
二、JavaScript代码的编写
第一步：收纳需要摆放的图片放入数组中
第二步：将第一行的图片排好后，开始排之后需要叠放的图片（即num+1）
第三步：获取上一行最矮的图片位置，将（num+1）放在他下面
最后：更新摆放后的高度
window.onload = function () {
imgLocation('container', 'box')
function imgLocation(parent, child) {
var cParent = document.getElementById(parent)
var cChild = cParent.getElementsByClassName(child)
var screenWidth = window.innerWidth
var imgWidth = cChild[0].offsetWidth
var num = Math.floor(screenWidth / imgWidth)
cParent.style.width = `${imgWidth * num}px`
console.log(cChild);
//操作第 num + 1 张
var boxHeightArr = []
for (var i = 0; i < cChild.length; i++) {
if (i < num)//第一行
{
boxHeightArr.push(cChild[i].offsetHeight)
}
else//找数组最小值
{
var minHeight = Math.min(...boxHeightArr)
var minIndex = boxHeightArr.indexOf(minHeight)
//摆放图片
cChild[i].style.position = 'absolute'
cChild[i].style.top = minHeight + 'px'
cChild[i].style.left = cChild[minIndex].offsetLeft + 'px'
//更新这一列的高度
boxHeightArr[minIndex] = boxHeightArr[minIndex] + cChild[i].offsetHeight
}
}
console.log(boxHeightArr);
}
}
这样便可以简单实现瀑布流了
