前端队长の技术博客

什么是图片瀑布流
实现原理
文章补充（2021-7-8）
columns常用属性
columns实现瀑布流

什么是图片瀑布流

用一张花瓣网页的图片布局可以很清楚看出图片瀑布流的样子：

简单来说，就是有很多图片平铺在页面上，每张图片的宽度相同，但是高度不同，这样错落有致的排列出 n 列的样子很像瀑布，于是就有了瀑布流图片一说。

实现原理

1、第一种方式

第一种方式前提是：图片的宽度固定，但是列可变（根据屏幕大小）

通过上面的介绍，我们知道要实现瀑布流的前提是宽度一致（假如为100px），高度可以不相同。

我们首先确定排布的列数（假如为4列），那么第一行只能放4张图片，然后将每个图片的高度放入一个数组中（假如为 heightArr = [100,50, 200,30]），当我们在放入下一张图片的时候就要判断这个数组中哪个高度是最小的（这里是30），然后还要知道最小的高度所在高度数组的索引（这里是i = 3），然后我们就可以对这张图片进行定位：

{
    position: absolute;
    left: i*100 + 'px';
    top: 30 + 'px'
}

如此遍历剩下的图片即可。

实现代码

下面是未处理的原始代码，图片之间间隔很多空白，影响美观。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            position: relative;
        }
        img {
            width: 200px;
            vertical-align: top;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/img/2-.jpg" alt="">
        <img src="./images/img/3-.jpg" alt="">
        <img src="./images/img/4-.jpg" alt="">
        <img src="./images/img/5-.jpg" alt="">
        <img src="./images/img/6-.jpg" alt="">
        <img src="./images/img/7-.jpg" alt="">
        <img src="./images/img/8-.jpg" alt="">
        <img src="./images/img/9-.jpg" alt="">
        <img src="./images/img/10-.jpg" alt="">
        <img src="./images/img/11-.jpg" alt="">
        <img src="./images/img/12-.jpg" alt="">
        <img src="./images/img/13-.jpg" alt="">
        <img src="./images/img/14-.jpg" alt="">
        <img src="./images/img/15-.jpg" alt="">
        <img src="./images/img/16-.jpg" alt="">
    </div>
</body>
</html>

下面是处理后的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            position: relative;
        }
        img {
            width: 200px;
            vertical-align: top;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/img/2-.jpg" alt="">
        <img src="./images/img/3-.jpg" alt="">
        <img src="./images/img/4-.jpg" alt="">
        <img src="./images/img/5-.jpg" alt="">
        <img src="./images/img/6-.jpg" alt="">
        <img src="./images/img/7-.jpg" alt="">
        <img src="./images/img/8-.jpg" alt="">
        <img src="./images/img/9-.jpg" alt="">
        <img src="./images/img/10-.jpg" alt="">
        <img src="./images/img/11-.jpg" alt="">
        <img src="./images/img/12-.jpg" alt="">
        <img src="./images/img/13-.jpg" alt="">
        <img src="./images/img/14-.jpg" alt="">
        <img src="./images/img/15-.jpg" alt="">
        <img src="./images/img/16-.jpg" alt="">
    </div>
</body>
<script src="./jquery.min.js"></script>
<script>
    $(function () {
        // 获取图片的宽度(200px)
        let imgWidth = $('img').outerWidth(); // 200

        waterfallHandler();

        // 瀑布流处理
        function waterfallHandler() {
            // 获取图片的列数
            let column = parseInt($(window).width() / imgWidth);

            // 高度数组
            let heightArr = [];
            for(let i=0; i<column; i++) {
                heightArr[i] = 0;
            }

            // 遍历所有图片进行定位处理
            $.each($('img'), function (index, item) {
                // 当前元素的高度
                let itemHeight = $(item).outerHeight();
                // 高度数组最小的高度
                let minHeight = Math.min(...heightArr);
                // 高度数组最小的高度的索引
                let minIndex = heightArr.indexOf(minHeight);
                
                $(item).css({
                    position: 'absolute',
                    top: minHeight + 'px',
                    left: minIndex * imgWidth + 'px'
                });

                heightArr[minIndex] += itemHeight;
            });
        }
        
        // 窗口大小改变
        $(window).resize(function () {
            waterfallHandler();
        });
    });
</script>
</html>

2、第二种方式

第二种方式前提是：列是固定的个数，然后图片根据屏幕的宽度进行自适应缩放。

这种方式由于图片是可以缩放的，宽高不好确定，因此不好用定位的方式处理。

我们可以这样处理，既然知道了列，那么每一列做一个容器。然后遍历图片，将图片放入容器高度最小的容器中即可。

这里我们使用js来添加图片，而不是事先写好在html中了。

实现代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
            float: left;
        }
    </style>
</head>

<body>
</body>
<script src="./jquery.min.js"></script>
<script>
    $(function () {
        const COLUMN = 4; // 4列
        let arr = []; // 存储4列li
        let minHeight = [] // 存储4列的高度

        create();

        function create() {
            // 创建ul li作为每一列的容器
            $("<ul></ul>").appendTo($("body")).css("width", "100%");
            for (let i = 0; i < COLUMN; i++) {
                var li = document.createElement("li");
                $(li).appendTo($("ul"))
                    .css({
                        "width": "24%",
                        "margin": "0 0.5%"
                    });
                arr.push(li);
                // console.log(arr);
                minHeight.push(0);
            }
            createImg();
        }

        function createImg() {
            let img = new Image();
            img.num = 2;
            img.src = `./images/img/${img.num}-.jpg`; // 素材图片的规律为 2-.jpg 3-.jpg 4-.jpg ...
            $(img).css("width", "100%");
            // 当图片加载完后
            $(img).on("load", loadHandler);
        }

        function loadHandler() {
            // 高度数组的最小值
            let min = Math.min.apply(null, minHeight);
            // 高度数组的最小值索引
            let minIndex = minHeight.indexOf(min);
            // 克隆一份图片
            let im = this.cloneNode(true);
            // 将图片假如对应最小值索引的容器中
            arr[minIndex].append(im);
            // 更新最小值索引的容器的高度
            minHeight[minIndex] += im.getBoundingClientRect().height;

            this.num++;

            // 图片的个数只有79张
            if (this.num > 79) {
                $(this).off("load", loadHandler);
                return;
            }
            this.src = `./images/img/${this.num}-.jpg`;
        }
    });
</script>

</html>

文章补充（2021-7-8）

经过 @薄墨无痕的提示，我发现使用columns属性确实可以轻易实现上述功能，只需要简单单单2行代码即可。

css的伟大之处就在这里，你永远无法预料到有哪些小众属性，让你眼前一亮，大大节省你的工作量。

columns常用属性

CSS属性 columns 用来设置元素的列宽和列数。它是一个简写属性，是属性 column-width 和 column-count 的集合（而且是没有顺序的）。

column-width：表示每一列的宽度。如果我们只设定column-width，浏览器会自动根据现有容器宽度划分列的个数。
column-count：表示分栏数目。如果我们只设定column-count，浏览器会自动根据现有容器列计算每一列的宽度。

优先级：column-count与column-width都有可能有更高的优先级，优先级计算诀窍就是统一转换column-count值，哪个小优先级就高。

示例：

/* 栏目宽度 */
columns: 100px;

/* 栏目数目 */
columns: auto;
columns: 4;

/* 同时定义宽度和数目(没有顺序) */
columns: 2 auto;
columns: auto 20px;
columns: auto auto;

column-rule：是column-rule-width，column-rule-style和column-rule-color这3个CSS属性的缩写。
column-rule-color：表示每个栏目中间分隔线的颜色。和border-color一样。
column-rule-style：表示分割线的样式。和border-style一样。
column-rule-width：表示分割线的宽度。和border-width一样。

示例：

column-rule: 1px solid red;

column-gap：表示每一栏之间的那个空白间隙大小。

示例：

/* 关键字值(默认值) 在多栏布局中为1em，在其它类型的布局中为0。*/
column-gap: normal; 

/* 长度值 */
column-gap: 3px;
column-gap: 3em;

/* 百分比值 */
column-gap: 3%;

columns实现瀑布流

测试代码如下，所有大小不一的图片被一个div包裹，图片的宽度设置为100%：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            
        }
        img {
            width: 100%;
        }
    </style>
</head>
<body>
    <div>
        <img src="./img/details/bag1_500X500.jpg" alt="">
        <img src="./img/details/bag1_54X54.jpg" alt="">
        <img src="./in/phone.jpg" alt="">
        <img src="./img/details/bag2_54X54.jpg" alt="">
        <img src="./img/details/bag3_500X500.jpg" alt="">
        <img src="./img/details/clothes1_500X500.jpg" alt="">
        <img src="./in/nav (2).jpg" alt="">
        <img src="./img/14993983520786712.jpg" alt="">
        <img src="./img/170_80.jpg" alt="">
    </div>
</body>
</html>

1、针对第一种：图片的宽度固定，但是列可变

div {
    column-width: 200px; // 宽度200px
    column-gap: 2px; // 列之间间隔2px
}

效果图：

2、针对第二种：列是固定的个数，然后图片根据屏幕的宽度进行自适应缩放。

div {
    column-count: 4; // 列的个数为4
    column-gap: 2px; // 列之间间隔2px
}

效果图：

以上仅仅2行代码就实现了需要大量js计算定位才达到的效果，css真是博大精深。这样想来如果把css学好会不会大大提升工作效率呢？

参考文章：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/columns
https://www.zhangxinxu.com/wordpress/2019/01/css-css3-columns-layout/

— End —

你好，我是前端队长Daotin，专注分享前端与认知。希望在这里，和你分享我的前端学习和工作经验，记录个人成长。

想要获取更多前端精彩内容，关注我(全网同名)，解锁前端成长新姿势。

This site is open source. Improve this page.