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

两行css如下:

效果图如下：

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

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

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

大致逻辑如下：

输出

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

2019年1月12日

我用的chrome 版本 70.0.3538.102（正式版本） （64 位）

以上代码没有问题，如果你用的老版浏览器可能存在兼容问题，就再多加几个重复的兼容浏览器的属性就行了，如下：

以此类推

html代码大致如下：

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

实现方式如下：

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

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

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

下面的 指的是

css：

同理

源自：https://segmentfault.com/a/1190000017866549

声明：文章著作权归作者所有，如有侵权，请联系小编删除。

感谢 · 转发欢迎大家留言