真的!两行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

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

感谢 · 转发欢迎大家留言

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190214B0ROF500?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券