vue实现瀑布流

最近项目要加一个瀑布流的页面，像这样：

一开始我想着直接写一个容器，容器的css属性加上column-width: 50%;和column-count: 2;为了避免在主体框中插入任何中断，需要向容器内子元素的css加上一个break-inside: avoid;但是这种写法有一个问题就是排列顺序是左边显示前一半，右边显示后一半，像这样：

而我需要的是那种每条数据根据左右区域的高度来判断这条数据是加载到左边还是右边的那种，像这样：

于是用纯css实现的想法就放弃了。
后来我想到分成左右两个列表去渲染：
首先在data里申明四个变量：

data:{
   
   
	leftlist:[],
	rightlist:[],
	leftHeight:0,
	rightHeight:0,
}

然后给左右两个列表分别加上 ref="left"和 ref=“right”
获取到列表数据后我用的是递归的方式向leftlist和rightlist内添加的数据