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

xiaokai 发布于2019-08-23 14:41 / 2009人阅读

摘要：两行如下分几列不留白，不知道什么意思可以取消这个样式试试列间距，可有可无，默认效果图如下说明不存在一边列表过长问题，很均匀，没有缺点抱歉有坑但可以一链代码解决这个列表显示顺序是左边右边，不符合正常展示逻辑然后可以使用对数据进行预处

两行css如下:

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

效果图如下：

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

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

这个列表显示顺序是左边 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代码大致如下：


     vue的语法，不会就粘贴20个div看效果
        内容... 这里可以自己实现宽高不一样的div，看效果

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

实现方式如下：

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

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

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

下面的指的是
css：

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

同理

云服务器 GPU云服务器瀑布流方式 js 简单瀑布流瀑布流思想html 瀑布流

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100977.html

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

摘要：两行如下分几列不留白，不知道什么意思可以取消这个样式试试列间距，可有可无，默认效果图如下说明不存在一边列表过长问题，很均匀，没有缺点抱歉有坑但可以一链代码解决这个列表显示顺序是左边右边，不符合正常展示逻辑然后可以使用对数据进行预处两行css如下: .waterfall-container { /*分几列*/ column-count: 2; } .w...

TZLLOG 2019-08-30 15:55 评论0 收藏0
真的！！！两行css代码实现瀑布流，html,css最简单的瀑布流实现方式且没有缺点！

摘要：两行如下分几列不留白，不知道什么意思可以取消这个样式试试列间距，可有可无，默认效果图如下说明不存在一边列表过长问题，很均匀，没有缺点抱歉有坑但可以一链代码解决这个列表显示顺序是左边右边，不符合正常展示逻辑然后可以使用对数据进行预处两行css如下: .waterfall-container { /*分几列*/ column-count: 2; } .w...

wangjuntytl 2019-08-02 14:05 评论0 收藏0
瀑布流之实例进阶

摘要：瀑布流也应该算是流行几年了吧。开始刷新的设置就很简单了，瀑布流刷新只和一个事件有关，即，主要的算法即，当页面滑动到最低高度的时候开始加载节点并且添加，当然，节点添加的个数是不固定的。这时候，就需要获取实际尺寸然后进行一个计算才行。瀑布流也应该算是流行几年了吧。首先是由Pinterest掀起的浪潮，然后国内设计如雨后春笋般，冒出很多瀑布流的例子，比如，蘑菇街，Mark之(不过最近涉黄，...

Baoyuan 2019-08-19 17:32 评论0 收藏0
纯css实现瀑布流（multi-column多列及flex布局）

瀑布流的布局自我感觉还是很吸引人的，最近又看到实现瀑布流这个做法，在这里记录下，特别的，感觉flex布局实现瀑布流还是有点懵的样子，不过现在就可以明白它的原理了 1.multi-column多列布局实现瀑布流先简单的讲下multi-column相关的部分属性 column-count设置列数 column-gap设置列与列之间的间距 column-width设置每列的宽度还要结合在子容器中...

MangoGoing 2019-08-29 16:38 评论0 收藏0