前言

瀑布流，是一种网页设计中常见的布局方式，它的灵感源自瀑布水流的自然流动。在这个设计中，内容像瀑布一样从上到下依次排列，呈现出一种流畅而动感的美感。瀑布流布局的美妙之处在于它的自适应性和视觉冲击力。不同大小、不同形状的内容可以自由地拼贴在一起，形成独特的画面。这种错落有致的排列方式让人眼前一亮，吸引着观者的注意力。

随手打开阿里旗下的淘宝，就能发现图片是宽度一样但是高度不一样，这样可以让用户在购买东西的时候可以一直有往下滑的欲望，那这种瀑布流布局是怎么设计的呢？

设计原理：

自适应性： 瀑布流布局可以自动适应不同屏幕尺寸和设备，使得内容在各种平台上都能良好地展示，这归功于其灵活的排列方式。
错落有致： 不同大小、形状和类型的内容以错落的方式呈现在页面上，形成了富有节奏感和美感的视觉效果，吸引用户眼球。
动态加载： 瀑布流布局通常采用动态加载技术，当用户滚动页面时，新的内容会不断地加载，保持页面的新鲜感和吸引力。
信息密度： 由于内容紧凑地排列在一起，瀑布流布局可以在有限的空间内展示更多的信息，提供更丰富的内容选择。

优势：

视觉吸引力： 瀑布流布局的错落排列方式给人以视觉上的冲击和新鲜感，能够吸引用户的注意力，增加页面停留时间。
用户体验： 通过动态加载和自适应性，瀑布流布局提升了用户的浏览体验，使得用户可以更轻松地浏览大量内容，降低了信息获取的难度。
内容展示： 瀑布流布局能够有效地展示多样化的内容，不同类型的信息可以在同一页面上展现，为用户提供了更多选择和可能性。
适应性强： 由于瀑布流布局的灵活性，它可以适用于各种类型的网站和应用，包括新闻网站、社交媒体、电子商务等，具有广泛的适用性和可扩展性。

总的来说，瀑布流布局以其独特的设计原理和诸多优势成为了现代网页设计中备受推崇的一种布局方式，为用户提供了更丰富、更流畅的浏览体验，也为网站的吸引力和实用性增添了不少亮点。

一、实现效果

准备好20张图片

二、html部分

定义container容器，在里面放20个box，在box中放上20张图片，引入js文件<script src="./index.js"></script>

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

三、css样式

        *{
            margin: 0;
            padding: 0;
            /* 内外边距重置为0 */
        }
        #container{
            position: relative;
        }
        .box{
            float: left;
            padding: 5px;
        }
        .box-img{
            width: 150px;
            padding: 5px;
            border: 1px solid #a4dc4b;
        }
        img{
            width: 100%;
        }

四、js部分

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

imgLocation('container', 'box');// 声明,实参

function imgLocation(parent, content) {
    // 有多少张图
    var cparent = document.getElementById(parent);
    // var ccontent = document.querySelectorAll('#container .box');//获取20个box
    var ccontent = getChildElement(cparent,content);//获取有几个盒子
    //每一个box的宽度
    var imgWidth = ccontent[0].offsetWidth;//获取每一个box的宽度
    var num = Math.floor(document.documentElement.clientWidth / imgWidth);//一行放几张
    cparent.style.width = `${imgWidth * num}px`;

    //要操作的是哪一张，每一列的高度
    var  BoxHeightArr = [];//所有box的高度
    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('*');//选中parent中的所有标签
    //挑出来所有的box
    for (var i = 0; i < allChild.length; i++){
        if (allChild[i].className == child) {
            childArr.push(allChild[i]);
        }
    }
    return childArr;
}

解析阿里面试题：探索瀑布流布局的设计原理与优势

前言

设计原理：

优势：

一、实现效果

二、html部分

三、css样式

四、js部分