真的！！！两行css代码实现瀑布流，html,css最简单的瀑布流实现方式且没有缺点！...

古城微笑少年丶 2023-02-24 03:36 2阅读 0赞

###  ###

（给前端宇宙加星标，提升前端小宇宙.）

> 作者：coder94
> 
> https://segmentfault.com/a/1190000017866549

两行css如下:

/*列间距，可有可无，默认30px*/
    /*column-gap: 0;*/

效果图如下：

![format_png][]

![format_png 1][]

说明：不存在一边列表过长问题，很均匀，没有缺点

抱歉：有坑!!! 但可以一链代码解决

这个列表显示顺序是 左边 123右边456，不符合正常展示逻辑；然后可以使用js对数据进行预处理；  
大致逻辑如下：

const oldList = [1, 2, 3, 4, 5, 6, 7]
    
    // 使用reduce函数接受一个初始值{ 0: [], 1: [], length: 2 },
    // 初始值包含两个空数组，和一个数组长度(Array.from方法要求将对象转数组时对象内要有这个属性)
    // 在reduce函数内根据索引做余2判断，因为分两，余0的加入第一个数组，余1的加入第二个数组
    // 最后reduce返回遍历完的对象 {0:[1,3,5,7],1:[2,4,6],length:2}
    // 使用Array.from({0:[1,3,5,7],1:[2,4,6],length:2}) 得到 数组 [[1,3,5,7],[2,4,6]]
    // 解构数组 使用concat合并，完事
    const newList = [].concat(...(Array.from(oldList.reduce((total, cur, index) => {
      total[index % 2].push(cur)  
      return total
    }, { 0: [], 1: [], length: 2 }))))
    
    console.log(newList)

输出

[1, 3, 5, 7, 2, 4, 6]

这样处理一下就可以 让列表展示顺序变为 左边 1， 3， 5， 7 右边 2， 4， 6

2019年1月12日  
我用的chrome 版本 70.0.3538.102（正式版本） （64 位）  
以上代码没有问题，如果你用的老版浏览器可能存在兼容问题，就再多加几个重复的兼容浏览器的属性就行了，如下：

-moz-column-count:3; /* Firefox */、
    -webkit-column-count:3; /* Safari 和 Chrome */
    column-count:3;
    
    -moz-column-gap:40px; /* Firefox */
    -webkit-column-gap:40px; /* Safari 和 Chrome */
    column-gap:40px;

以此类推

html代码大致如下：

<div class="waterfall-container">
        <div class="waterfall-item" v-for="i in 100"> vue的语法，不会就粘贴20个div看效果
            内容... 这里可以自己实现宽高不一样的div，看效果
        </div>
    </div>

之前还用flex实现了一个，有坑，一边太长，一边太短,请先大致了解flex，写过demo再往下看，效果图如下：

![format_png 2][]

实现方式如下：

一行里面两列，可以控制每列数量相等，

每列里面各自循环，下面伪代码

但是有个坑，如果左边都很高，右边比较矮，就会出现右边空很多的内容， 在找解决办法

下面的 <row> 指的是  
css：

.row{    
        display:flex;
        flex-direction:row;
    }

<col>同理

### 学习交流 ###

*  关注公众号【前端宇宙】,每日获取好文推荐
 *  添加微信,入群交流

![format_png 3][]

“在看和转发”就是最大的支持

[format_png]: /images/20230209/66ccf85b5df0412bbc5923c8589944e3.png
[format_png 1]: /images/20230209/a0cef36b626f49279fcf837aee01dc4d.png
[format_png 2]: /images/20230209/36da3631c2c043dea0e1b7e4a0482c62.png
[format_png 3]: /images/20230209/950d754606e64afe9185b10ab2bfe93d.png