前端之瀑布流布局（多种实现方案）

瀑布流布局，一般指根据内容高度自适应填充到某一列以使整体页面和谐，常见的有图片网站，比如每一行每一列的内容是错开的。

瀑布流布局一般是下面这个样子

PC：

PC端

移动端：

image.png

Tips：本文字数稍长，思路清晰，耐心读下来绝对让你掌握瀑布流布局！
下面介绍三种实现方案，推荐大家仔细看看第一种

方案一： js实现，css略微辅助

在线演示： https://cdpn.io/lilylaw/fullpage/mdJpdLp

目标要求：

实现瀑布流
PC和移动端都要适配
图片不可变形，宽度固定
瀑布流的列数不固定，随屏幕宽度的变化而变化
若屏幕宽度有富余，则图片瀑布流区域居中展示。

思路分析

实现瀑布流思路如下：
（1）根据图片宽度，计算当前屏幕一共有几列。
举例：当前屏幕宽度是820px，每一个包裹着图片的盒子宽度是200px，所以一共可以排820/200 = 4 列（向下取整）
（2）先按顺序排第一列，记录下每一列当前占据的高度值。
举例：假设当前屏幕宽度为820px,每一个包裹着图片的盒子宽度是200px,可以排4列，现在有10个图片高度分别是[120,55,800,380,77,20,130,600,453,780] （单位px），先排前4个图片，排完之后这4列高度依次是[120,55,800,380]，把这4列当前高度值存起来。
（3）第一列排完之后开始排后面的元素，要找出所有列数中高度最小的那一个，排在它的下面，高度值累加。以此类推。
举例：接（2）中的例子，现在这4列高度依次是[120,55,800,380]，可以看到第2列高度最小，所以第5个图片排在第2列，紧挨着第2列的第1个图片下。然后第2列的高度变成了 55+77 = 132 ，当前这4列的高度变成了[120,132,800,380]。剩下的图片也按照这个逻辑去排就ok了。
PC和移动端适配在html中配置如下：

  <meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=no' />

图片不变形，宽度固定
html中的 img不是块级元素，它属于行内替换元素，虽然width、height等属性仍然有效，但非块状元素在用css或js修饰时会遇到很多不可预测的问题。基于此，我习惯给每一个img用一个div包裹住，以后直接操作外层div，如下

<div style="width:200px;height:auto">
  <img src="xxxxx" alt='xxxxx' style="width:100%;height:auto"/>
</div>

第4个要求说白了是要监听浏览器窗口宽度变化，然后重新布局，所以给窗口对象添加一个resize 监听事件就ok了

  window.addEventListener('resize',()=>{
    // 重新布局
  })

图片区域居中显示：如果针对单个图片去计算位置以使整个区域居中显示，这种方法计算量大，得不偿失。所以将所有图片包在一个div里，使最外层div居中就ok了。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流布局</title>
    <meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=no' />
    <style>
        html{
            font-size: 12px;
        }
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div id='forcenter'></div>
    </div>
    <script src="./waterfall.js"></script>
    <script>
        let mwf = new WaterFall({
            id: 'forcenter',
            imgUrls: [
                'https://icweiliimg6.pstatp.com/weili/l/195564498297815041.webp',
                'https://weiliicimg9.pstatp.com/weili/l/461972764095807490.webp',
                'https://icweiliimg9.pstatp.com/weili/l/447251256884854785.webp',
                'https://icweiliimg6.pstatp.com/weili/l/165755629970653210.webp',
                'https://weiliicimg6.pstatp.com/weili/l/218593064967209016.webp',
                'https://icweiliimg6.pstatp.com/weili/l/320841925450530819.webp',
                'https://icweiliimg1.pstatp.com/weili/l/165755655736786957.webp',
                'https://icweiliimg1.pstatp.com/weili/l/452540045247774720.webp',
                'https://weiliicimg9.pstatp.com/weili/l/223888416044482620.webp',
                'https://icweiliimg9.pstatp.com/weili/l/292051943627161624.webp',
                'https://icweiliimg1.pstatp.com/weili/l/235158650747486283.webp',
                'https://weiliicimg1.pstatp.com/weili/l/165755681505542155.webp',
                'https://icweiliimg1.pstatp.com/weili/l/202821919289376781.webp',
                'https://weiliicimg9.pstatp.com/weili/l/611415730252415145.webp'
            ]
        });

        window.onload = ()=>{
            mwf.WFRender();
        }

        window.onresize = ()=>{
            mwf.resizeWF();
        }
    </script>
</body>
</html>

// waterfall.js

function WaterFall(obj){
    this.id = obj.id;
    this.imgUrls = obj.imgUrls;
    this.container = document.getElementById(this.id);
    this.container.className = 'forcenter';
}

WaterFall.prototype = {
    WFRender: function(){
        let flag = 0;   // 标志位，用于检测每一张图片都加载完毕

    this.imgUrls.map((item,i)=>{
      let div = document.createElement('div');
      div.className = 'item';

      let img = new Image();
      img.src = item;
      img.onload = () => {
        flag++;
        div.appendChild(img);
        this.container.appendChild(div);

                // 全部图片加载完毕后再开始布局，否则获取不到元素的最终高度。
        if(flag===this.imgUrls.length){
          this.resizeWF();
        }
      }
        });

    let styleE = document.createElement('style');
    styleE.innerHTML = `div.item{
        position: absolute;
        transition: all .5s;  /* 使过渡平滑*/
        width : 200px;
        height: auto;
        padding:5px;
        box-sizing: border-box;  /* 非常重要，可将不必要的计算略去 */
      }
      div.item img{
        width: 100%;
        height: auto;
      }
      .forcenter{
        position: relative;
        margin: auto;
      }`;
     this.container.appendChild(styleE);
    },
    resizeWF: function(){
        let winW = window.innerWidth;
    let itemNum = Math.floor(winW/200); // 当每一个项的宽度都是固定的时候，需要计算出浏览器一行可以排列几个。
    this.container.style.width = (itemNum*200)+'px'; // 用于居中的包裹盒子的宽度

    let saveColumnHeight = [];  // 定义一个数组，用于存储 每一列所有元素的高度 之和
    let items = document.querySelectorAll('.item');

    for(let i=0; i< items.length; i++){
        if(saveColumnHeight.length<itemNum){
            saveColumnHeight[i] = items[i].offsetHeight;// 当布局的元素还没占满一行时，继续向数组中添加第一行第i列的高度
            setDiv(items[i],200*i,0);    // 放置div
        }else{  // 当已经占满一行时，就找出每一列的最小高度，然后当前的这个div放在高度最小的那一列
            let pos = getMinH(saveColumnHeight);    //去找高度最小的那一列
            saveColumnHeight[pos.column] += items[i].offsetHeight;
            setDiv(items[i],pos.left,pos.top);    // 放置div
        }
    }
    }
}

// 工具性函数，不必放入原型链。
function getMinH(arr){
  let flag = {
      left:0,
      top:0,
      column:0
  }

  arr.map((item,i)=>{
      if(flag.top===0){
          flag.top = item;
      }else{
          if(flag.top>item){  // 找出高度最小的那一列
              flag.top = item;
              flag.left = 200*i;
              flag.column = i;
          }
      }
  });

  return flag;
}

function setDiv(item,left,top){
  item.style.left = left+'px';
  item.style.top = top+'px';
}

Tips

在布局之前，确保所有图片已加载完毕，否则无法获取最终高度导致布局出错。
css中有一个属性box-sizing，它的作用是将元素的border和padding都计算在元素尺寸之内（详情请自己查阅），这么设置有一个好处：平常我们布局为了避免图片紧挨着不好看经常加一些padding或margin，因此计算过程就复杂了。box-sizing属性可以将padding包含进图片尺寸，通过padding使图片避免紧挨着，在计算上只考虑最外层尺寸就ok了，省了很多事。

方案二纯css

目标要求

实现瀑布流样式
PC和移动端都要适配
图片不变形
瀑布流列数自适应

思路分析

css中有这么两个属性:

column-count 将元素划分的列数，若为auto，则自适应
column-gap 元素之间的间隙
column-width 每一列的宽度
使用这三个属性基本可以实现啦！

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流布局</title>
    <meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=no' />
    <style>
        html{
            font-size: 12px;
        }
        *{
            margin: 0;
            padding: 0;
        }
        div.item{
            transition: all .5s;
            /*width : 200px;*/
            height: auto;
            padding:5px;
            box-sizing: border-box;
        }
        .wrap{
            column-width: 200px;
            column-count: auto;
            column-gap: 1rem;
        }
    </style>
</head>
<body>
<div class="wrap" id='wrap'>

</div>
<script>
    var imgUrls = [
        'https://icweiliimg1.pstatp.com/weili/l/452540045247774720.webp',
        'https://weiliicimg9.pstatp.com/weili/l/223888416044482620.webp',
        'https://icweiliimg6.pstatp.com/weili/l/320841925450530819.webp',
        'https://icweiliimg6.pstatp.com/weili/l/195564498297815041.webp',
        'https://weiliicimg9.pstatp.com/weili/l/461972764095807490.webp',
        'https://icweiliimg1.pstatp.com/weili/l/165755655736786957.webp',
        'https://icweiliimg9.pstatp.com/weili/l/447251256884854785.webp',
        'https://icweiliimg6.pstatp.com/weili/l/165755629970653210.webp',
        'https://weiliicimg6.pstatp.com/weili/l/218593064967209016.webp',
        'https://icweiliimg9.pstatp.com/weili/l/292051943627161624.webp',
        'https://icweiliimg1.pstatp.com/weili/l/235158650747486283.webp',
        'https://weiliicimg1.pstatp.com/weili/l/165755681505542155.webp',
        'https://icweiliimg1.pstatp.com/weili/l/202821919289376781.webp',
        'https://weiliicimg9.pstatp.com/weili/l/611415730252415145.webp'
    ];

    window.onload = function(){
        let container = document.getElementById('wrap');

        imgUrls.map((item,i)=>{
            let div = document.createElement('div');
            div.className = 'item';

            let img = document.createElement('img');
            img.src = item;
            img.style.width = '100%';
            img.style.height = 'auto';

            div.appendChild(img);
            container.appendChild(div);
        });
    }

</script>
</body>
</html>

注意

其实这样弄出来的根本不是严格意义上的瀑布流布局，只不过有一个瀑布流布局的样子而已，因为对高度的判断不如js计算来的严格，所以会出现一些不容易被注意到的问题（我也是测试了好久才找到），如下图

image.png

这也是我推荐大家用第一种方法的最主要原因。

方案三 flex布局

这种方案做出来的效果有点奇葩，特殊的应用场景可能会用到，最终效果是横向瀑布流
flex布局中有一个属性flex-flow,指明在哪个方向上在长度不够的情况想拆行，详情大家自己查阅

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流布局</title>
    <meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=no' />
    <style>
        html{
            font-size: 12px;
        }
        *{
            margin: 0;
            padding: 0;
        }
        div.item{
            transition: all .5s;
            width : 200px;
            height: auto;
            padding:5px;
            box-sizing: border-box;
        }
        .wrap{
            display: flex;
            flex-flow: column wrap;
            height: 400px;
        }
    </style>
</head>
<body>
<div class="wrap" id='wrap'>

</div>
<script>
    var imgUrls = [
        'https://icweiliimg1.pstatp.com/weili/l/452540045247774720.webp',
        'https://weiliicimg9.pstatp.com/weili/l/223888416044482620.webp',
        'https://icweiliimg6.pstatp.com/weili/l/320841925450530819.webp',
        'https://icweiliimg6.pstatp.com/weili/l/195564498297815041.webp',
        'https://weiliicimg9.pstatp.com/weili/l/461972764095807490.webp',
        'https://icweiliimg1.pstatp.com/weili/l/165755655736786957.webp',
        'https://icweiliimg9.pstatp.com/weili/l/447251256884854785.webp',
        'https://icweiliimg6.pstatp.com/weili/l/165755629970653210.webp',
        'https://weiliicimg6.pstatp.com/weili/l/218593064967209016.webp',
        'https://icweiliimg9.pstatp.com/weili/l/292051943627161624.webp',
        'https://icweiliimg1.pstatp.com/weili/l/235158650747486283.webp',
        'https://weiliicimg1.pstatp.com/weili/l/165755681505542155.webp',
        'https://icweiliimg1.pstatp.com/weili/l/202821919289376781.webp',
        'https://weiliicimg9.pstatp.com/weili/l/611415730252415145.webp'
    ];

    window.onload = function(){
        let container = document.getElementById('wrap');

        imgUrls.map((item,i)=>{
            let div = document.createElement('div');
            div.className = 'item';

            let img = document.createElement('img');
            img.src = item;
            img.style.width = '100%';
            img.style.height = 'auto';

            div.appendChild(img);
            container.appendChild(div);
        });
    }

</script>
</body>
</html>

总结

第一种方法其实是最合适的，也是对开发人员要求最高的，即使有思路与算法在开发过程中也会踩很多坑，比如（1）图片预加载，（2）querySelector取元素居然获取不到，（3）使用box-sizing简化计算过程降低复杂性，等等。box-sizing 属性用好了非常高效，推荐大家去仔细看看

第二种方法其实也可行，但是不推荐
第三种方法就有点扯了，估计不常用到，大家看看就行

最后编辑于：2021.08.11 11:01:13

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,294评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,493评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,790评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,595评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,718评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,906评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,053评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,797评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,250评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,570评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,711评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,388评论 4赞 332
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,018评论 3赞 316
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,796评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,023评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,461评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,595评论 2赞 350

前端之瀑布流布局（多种实现方案）

方案一： js实现，css略微辅助

目标要求：

思路分析

代码

Tips

方案二 纯css

目标要求

思路分析

代码

方案三 flex布局

代码

总结

推荐阅读更多精彩内容

方案二纯css