Vue怎么实现无限加载瀑布流

这篇文章主要介绍"Vue怎么实现无限加载瀑布流"，在日常操作中，相信很多人在Vue怎么实现无限加载瀑布流问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"Vue怎么实现无限加载瀑布流"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

具体内容如下

我做的这个瀑布流放在了一个嵌套页面里，就是类似管理后台的main content中，如果要改成全屏的也很方便，其实更容易些，因为会避开一些在元素上使用onScroll的坑。

通过这个瀑布流，可以掌握以下几个知识点：

1、在元素上监听scroll事件，相对直接在window上监听麻烦一点点；
2、image.onload事件；
3、promiseAll;
4、vue 的 transition-group

这里使用了mockjs来模拟图片数据，然后通过axios来调用图片数据，也可使用其他数据源。

通过计算图片高度，判断把图片加载到哪一列。
如果屏幕还有空余，那就继续加载。
无限滚动加载。
屏幕resize这块没有做，后期可以加上去。

直接贴代码，有问题欢迎切磋。

到此，关于"Vue怎么实现无限加载瀑布流"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！