.waterfall-container{/*分成几列*/column-count:2;}.waterfall-item{/*不能留空，如果不知道什么意思可以取消这个样式试试*/break-inside:avoid;}有缺点~这样正常的瀑布流显示方式应该改为：左1右2左3右4这个瀑布流实现的显示顺序是左1右3左2，对4。和正常思维相反，需要用js特殊处理，而且经过特殊处理，对js增删元素后，需要重新计算显示顺序。两行css如下：.waterfall-container{/*分成几列*/column-count:2;}.waterfall-item{/*不能留空，如果不知道什么意思可以取消这个样式试试*/break-inside:avoid;}/*列间距可选，默认30px*//*column-gap:0;*/效果图如下：说明：单边没有list太长的问题，非常统一，没有缺点抱歉：有坑！！！但是你可以用代码链来解决这个列表。显示顺序为左边123，右边456，不符合正常的显示逻辑；然后就可以使用js对数据进行预处理了；大致逻辑如下：constoldList=[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合并，完成constnewList=[].concat(...(Array.from(oldList.reduce((total,cur,index)=>{total[index%2].push(cur)returntotal},{0:[],1:[],length:2}))))console.log(newList)output[1,3,5,7,2,4,6]可以这样处理把list的显示顺序改成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代码大致如下：20个div效果内容...这里可以自己实现不同宽高的div。看效果
