移动端瀑布流加上拉加载

效果图：

image.png

实现思路：

核心是vue的nextTick配合vant中的list上拉加载组件实现；
这是两列，所以这里用了两个容器，也就是两个数组，一列为一个容器，然后往里push数据，在判断哪一个容器的高度小，就往哪一列push数据，页面初始化的时候，左侧容器的高度最低，然后往里添加了一条数据，这里就碰到了一个问题，由于实现逻辑是判断页面元素高度，第一次渲染完后，该怎么再次执行判断函数呢，这里就用到了vue的nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上；

代码