采用CSS的column-count属性实现多栏布局。
实现的代码：
.container{padding:10px;column-count:2;column-gap:10px;}column-count表示分栏数目，column-gap表示分栏的间距。这里表示分2栏，两栏之间的间距为10px。
效果：
第二列在滑动的时候会出现抖动。
缺点：排列顺序是先上下后左右，而用户是横排观看，因此无法将优先级较高的项排列在前。无限滚动时由于新元素的加入导致，第二列上面的元素会移动到左边一列的最下面导致出现抖动。
使用flex布局，将容器设置为flex布局，设置允许换行，容器设定固定宽度。space-evenly：平均分布所有项目之间的间距，并且首尾项目与容器边缘之间的空间大小也相等。
.container{display:flex;flex-wrap:wrap;justify-content:space-evenly;}.recommendCard{width:180px;height:fit-content;margin-bottom:20px;padding:0;border-radius:4px;display:flex;flex-direction:column;justify-content:space-between;}效果：
上下图片之间的间距的不齐。
缺点：这里发现flex布局是一行一行的，无法实现卡片的等宽不等高，导致每行上下卡片会出现空隙。
flex方法应该有别的方法可以实现，比如按列排列，但是本文没有实现出来。本方法仅展现该代码的实现效果。
通过计算每个card的高度，使用absolute定位动态计算card高度的偏移位置。这也是一些商业瀑布流的常见做法。
优点：精准。
缺点：计算代价大，在计算card高度时，可能会造成大量重排。
Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局，Grid布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局。
使用grid布局实现两列排布，简洁方便。默认从上一行结束处开始排布。