CSS块状元素的瀑布流

最近遇到一个CSS的排版问题，在一个父元素下的多个子元素瀑布流排版

正常情况下每个子元素大小相同的情况下排版如下，这个没有太大的问题

如果每个子元素的宽度相同，而高度不相同，就会出现空白，如下

想要的效果是子元素之间的空白保持一致，因为1号元素的高度远小于4号元素，所以下一行的子元素5号位置会定在相对于4号元素的高度的位置，尽管1号元素留下了很多的空白

要达到填补空隙的效果，只需要在元素的样式中加入如下代码

父元素   column-count: 4;/*设定每行元素的个数*/
              column-gap: 0;/*设定列列间距*/

子元素   break-inside: avoid;/*控制子元素分解为单独的列，以免列表内容跨列破坏布局*/

效果如下

初步的解决办法就是这样，有更好的再继续更新