各大软件与网站的小心机：页面的“瀑布流”实现（JavaScript）

站长

2024年08月07日 21:54 · 阅读数 16

前言

各位同学，在刷小红书、抖音等软件时，是不是发现了，在发现或者推荐界面时，软件的布局并不是整齐的一行行的排列下去的，而是像这样的：

各大软件与网站的小心机：页面的“瀑布流”实现（JavaScript）

还有这样的

形如这样的拼接式网页布局，让信息在页面中像瀑布一样排列，信息也会随着页面大小的变化而发生排列的变化，提高用户的体验，我们称这样的页面排布为：

瀑布流

正文

下面来教大家怎么实现这样的瀑布流页面

1.编写HTML代码

首先我们要想到，我们要实现“瀑布流”，不管怎么样，我们瀑布的顶部一定是对齐的，根据这个思路，我们先将第一行的图片摆放出来

我准备了10张图片，我们可以先按顺序将图片依次摆放至页面上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="container">
        <div class="box">
            <div class="box-img">
                <img src="./img/1.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/2.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/3.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/4.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/5.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/6.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/7.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/8.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/9.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/10.png" alt="">
            </div>
        </div>
        
    </div>
</body>
</html>

好了我们现在将所有图片全部堆在了页面中，接下来我们给页面中的容器都写上css

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            position: relative;
        }
        .box{
            float: left;
            padding: 5px;
           
        }
        .box-img{
            width: 150px;
            padding: 5px;
            
        }
        img{
            width: 100%;
        }
    </style>

实现了一个简单的布局框架，包括清除默认样式、创建相对定位的容器、使用浮动布局以及对图片和容器的尺寸、内边距进行设定，我们将每一张图片的宽度设定一致，方便后续摆放。

我们将页面展示一下大概是这样的

好像图片不够多？？？

那我们再打十个！！！啊不是，再加十个

OK了家人们，我们可以开始写我们的JavaScript代码了

2.JavaScript的编写

很多同学会觉得这个JavaScript代码好像无从下手啊，但是我们用程序思想好好想一想，我们现在需要的是哪几个步骤？

(1)第一步，对第一行的操作，我们需要确定第一行有多少张图片

我们在css中编写的代码，是将��容器设置为相对定位，并且将每一个小容器box设置为左浮动，使得每一行图片的多少会随着页面的大小的改变而改变，所以，我们要确定第一行有n张图片

怎么确定第一行有多少张图片？

用JavaScript编写代码获取屏幕的宽度和图片的宽度，用简单的数学方法便能计算出代码如下

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`
    }
}

(2)第二步，我们确定了第一行有n张图片，接下来我们应该操作第n+i张图片(i>0)

仔细思考，我们应该怎么样操作第n+1张图片

1.获取每一行的高度

2.找到第一行高度最小的那一列

3.将第n+i张图片放置高度最小的那一列

4.更新高度

有了思路开始编写代码

 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
            }
        }

完整代码如下

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`

        //操作第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
            }
        }
    }





}

<!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: 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="./img/1.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/2.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/3.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/4.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/5.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/6.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/7.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/8.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/9.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/10.png" alt="">
            </div>
        </div>
          <div class="box">
            <div class="box-img">
                <img src="./img/1.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/2.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/3.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/4.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/5.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/6.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/7.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/8.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/9.png" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/10.png" alt="">
            </div>
        </div>
    </div>
</body>
</html>

搞定！下班！

转载自:https://juejin.cn/post/7369423779309060135