【Vue瀑布流布局】vue简单实现瀑布流布局，循环数据自动排列到最短的列上【详细注释，直接使用】

前言

瀑布流布局是什么呢？应用于什么场景呢？
简单描述一下，就是，瀑布流布局就是宽度一致，但是高度不限定死，最终通过算法排列，使得布局出现一种上下交错显示的感觉，看起来像是瀑布一样。
应用场景：可以说非常多了，比如最常见的淘宝，蘑菇街等都是瀑布流布局
做前端的肯定都会遇到这种情况需要使用瀑布流布局
那么今天我就专门整理一个好用的瀑布流布局实现方法
以后小伙伴们在需要做到这个布局的时候可以直接来着复制去改改就可以使用了。【建议收藏】

效果图

效果图内放上三张图片，一张是pc端的5列布局。一种是移动端手机的2列布局，一种是pad端的2列布局

PC端的

手机端的

pad端的

上代码

这里代码可以直接一键复制丢到你们的项目上看看效果哈。
简单描述一下实现逻辑，代码内有注释详细看得懂。
逻辑：通过定位来实现每一个盒子的位置排列。
然后通过js的计算把每一列的长短都计算好，以此让下一个循环出的盒子永远放在最短的那一列下面
保证列不会出现一列非常长，另外一列很短的情况。

手机和电脑切换的时候刷新一下，因为可能布局会有点乱掉了。正常设备大小会自适应的。