瀑布流实现

方法一、使用column-count

css如下：

.waterfall-container { column-count: 2; /*分几列*/ } .waterfall-item { break-inside: avoid; /*不留白*/ }

特点：数组先去填充第一列，再去填充第二列，以此类推，每一行不用对齐，页面不留空白 比如：数组： [1, 2, 3, 4, 5, 6]，左边一列展示的是1、2、3，右边一列展示的是5、6、7，要想按照展示逻辑展示，选择方法将数组按列划分

方法二、使用flex

css如下：

.row{ display:flex; flex-direction:row; } .row-item{ /*设定两列*/ width: 50%; }

特点：每一行不管内容是否一样高， 每一行都是对齐的，页面可能有空白