最近接到这样一个运营需求，需要展示各个充值档首充用户后续复充计数统计，需求如下图所示：
看到此表，作为全栈工程师，首选需要考虑的是如何设计一个能高效展示数据的页面，如果简单的使用Table表格去实现这个那必然是特别浪费空间的，因为表格只需要3列就行。 然后是数据值的展示，特别是数目较多行较多时候，我们人眼对数字会出现疲惫感，我想应该使用一种图表形式来同时展示数值的大小，使其一目了然。
通过不断调整，小编使用了瀑布流+行背景条的展示方式，最终结果如下图：
瀑布流是CSS写法如下：
.list{
width: 100%; // 默认宽度
margin: 6px auto; // 居中
column-count: 4; // 默认列数
column-gap: 10px; // 列间距
}
.item{
border-radius: 5px;
box-shadow: 1px 1px 2px #ddd;
width: 100%;
break-inside: avoid;
}
主要用到了columns默认列数column-gap列间距和break-inside这三个属性，如果需要设置响应式加上不同媒介显示宽度对应的列数值就行了：
@media (min-width: XXXpx) and (max-width: XXXpx) {
.list {
column-count: 3;
}
}
...
css的瀑布流只能使用纵向的排列，如果需要使用横向排列，那只能使用js加绝对定位计算来实现了，这里就css简单实现下就可以了
