什么是瀑布流

瀑布流布局是一种动态排列内容的方式，通常以多列的形式呈现。每一列的宽度相同，但内容的高度可以不同。当新的内容被添加时，它会被放置在当前高度最小的列中，从而使得页面呈现出瀑布流般的视觉效果。

这种布局方式的优点在于能够更好地利用页面空间，使得内容呈现更加多样化和生动。它通常被用于展示图片、新闻、商品等内容，能够吸引用户的注意力并提升用户体验。

瀑布流布局也被广泛运用于社交媒体、博客和电子商务网站中，因为它能够快速展示大量内容，并且适应不同屏幕尺寸的设备。这种布局方式的实现通常借助于CSS和JavaScript来动态排列和调整内容的位置。 Ex: 小红书

HTML代码实现：(代码如下)

<!DOCTYPE html>
    <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;
            /* border: 1px solid #aaa; */
        }
        img{
            width: 100%;
        }
    </style>


    <div id="container">
        <div class="box">
            <div class="box-img">
                <img src="./img/img/1.webp" alt="">
            </div>
        </div>
    </div>
    </body>
</html>

思路：先设置容器并且让他浮动，然后装载你想要的图片，再设置图片的宽度，装载图片的容器的宽度以及元素和容器边框之间的距离。

JS代码实现：（如下）

1.首先，每个屏幕的大小不同，所以一行里能装载的图片的数量也不同，所以要先获取屏幕的宽度，然后再计算一行能装下多少张图片。

window.onload = function() {
    //确定第一行能放n张图
    //1.获取屏幕宽度
    //2.获取图片宽度
    //操作第n+1张 摆放它的位置 放在高度最小的那一列
    //1.获取每一列的高度
    //2/更新这一列的高度

    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+1张图
        var boxHeightArr = []
        for(var i = 0;i < cChild.length;i++){
            if(i < num){                         // 第一行
                cChild[i].offsetHeight           //获取第一行所有图片的高度
                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 
            }
        }

实现效果如下：

希望这篇文章可以帮助你了解如何用JS实现瀑布流😀

用JS实现页面瀑布流

什么是瀑布流

HTML代码实现：(代码如下)

JS代码实现：（如下）