你生活中有被瀑布流拿捏了嘛？？？

效果图

前言

在当今的互联网时代，网页设计不仅要美观，还要能够提供良好的用户体验。瀑布流布局作为一种流行的网页设计模式，以其独特的视觉效果和灵活的布局方式，受到了广大设计师和用户的青睐。本文小编将详细介绍瀑布流布局的原理、优势、应用场景以及实现方法，帮助你了解这一设计趋势，从而在实际项目中更好地运用瀑布流布局，提升网站的用户体验和整体效果。

正文

准备

文件摆放：

代码和分析

html

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            position: relative;
        }
        .box{
            float: left;
            padding: 5px;
        }
        .box-img{
            width: 150px;
            padding: 5px;
            border: 1px solid #4bc6b5;
        }
        img{
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="box">
            <div class="box-img">
                <img src="./img/1.webp" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/2.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/3.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/4.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/5.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/6.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/7.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/8.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/9.webp" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/10.webp" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/1.webp" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/2.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/3.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/4.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/5.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/6.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/7.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/8.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/9.webp" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/10.webp" alt="">
            </div>
        </div>

    </div>

    <script src="./index.js"></script>
</body>
</html>

html分析

定义一个container容器
定义20 个box容器
在box 容器中定义box-img 容器，并在该容器中存放img标签元素，用于存放图片
给container 容器加一个相对定位，来实现后续的移动
给box 加一个float为left来实现向左浮动

js

ini 复制代码

//获取用户屏幕宽度，决定一行能放下几张图
//操作下一张图，放到上一行最矮的列下面

imgLocation('container', 'box');

function imgLocation(parent ,content) {
    var cparent = document.getElementById(parent);
    var ccontent = getChildElement(cparent, content); 
    //document.querySelectorAll('#container .box');
    //每一个box的宽度
    var imgWidth = ccontent[0].offsetWidth;
    var num = Math.floor(document.documentElement.clientWidth / imgWidth);
    cparent.style.width = `${imgWidth * num}px`;

    //要操作的是哪一张，每一列的高度
    var BoxHeightArr = [];
    for (var i = 0; i < ccontent.length; i++) {
        if (i < num){//第一行
            BoxHeightArr[i] = ccontent[i].offsetHeight;
        }else {//要操作的
            var minHeight = Math.min.apply(null ,BoxHeightArr);
            var minIndex = BoxHeightArr.indexOf(minHeight);

            //摆放图片的位置
            ccontent[i].style.position = 'absolute';
            ccontent[i].style.top = minHeight + 'px';
            ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px';

            //更新这一列的高度
            BoxHeightArr[minIndex] = BoxHeightArr[minIndex] +  ccontent[i].offsetHeight;
        }
    }
};

function getChildElement(parent, child) {
    //获取parent中所有的child
    var childArr = [];
    var allChild = parent.getElementsByTagName('*');
    //挑出来所有的box
    for (var i = 0; i < allChild.length; i++) {
       if (allChild[i].className === child ) {
        childArr.push(allChild[i]);
       }
    }
    return childArr;
};

js分析

定义两个函数imgLocation 和getChildElement
imgLocation(parent ,content)：

定义两个形参，parent 传入 'container' ，content 传入 'box' ，通过id获取parent容器，并命名为cparent；
通过getChildElement(cparent, content) (这个是我们自定义的方法，也可以通过document.querySelectorAll('#container .box'); 来实现，但是在这不太推荐，这样的话可维护性就降低了 )获取cparent内所有的content容器，并命名为ccontent，也就是获取container内的box容器，应该是有20个box容器；
接下来我们应该来获取每个box宽度和屏幕的宽度 ，来算出该屏幕一行能放几个box容器，通过ccontent $0$ .offsetWidth 和document.documentElement.clientWidth 来获取box和屏幕宽度，算出一行可放的box容器数目num(向下取整)，然后再将container容器宽度设置为imgWidth * num ，通过 cparent.style.width = ${imgWidth * num}px; 来实现；
设计一个数组BoxHeightArr 用于存放第一列图片的高度，第num+1张图片就存放在前num中数值最小的图片下面，获取数值最小的下标，给要加入的图片设置绝对定位 ，通过left，top 移动来实现，并把该图片的高度加上进行更新。

getChildElement(parent, child)：

定义一个childArr 数组用于存放child容器；
定义allChild用于获取所有的容器；
通过遍历allChild 来筛选child 容器并加入childArr；
然后childArr。

结语

通过本文的介绍，我们深入探讨了瀑布流布局的各个方面，从其基本原理到实现方法，再到实际应用场景，全面展示了瀑布流布局的魅力和优势。瀑布流布局不仅能够提供丰富的视觉体验，还能有效提升用户的浏览效率，使其在众多网页设计模式中脱颖而出。希望本文的内容能够给你带来参考和启示，帮助大家在未来的项目中更好地运用瀑布流布局，创造更多令人眼前一亮的网页作品。

这是深夜睡不着的你嘛，嘿嘿

希望能够给你们带来帮助哟，如果有帮助的话可以点个赞鼓励鼓励嘛，小编继续加油~