1.1.0版本的思考

[lhlyu]

1. 内置真实高度计算方法
2. 修改虚拟列表遍历算法，改成双指针判断，为了避免特殊情况(出现一个高度非常高独占一列的元素)，必须针对每个元素进行判断

瀑布流元素整体是线性增加的，使用区间树算法并没有很好的解决元素多时计算可见元素的耗时问题

3. keep-alive路由切换时，滚动条的位置回到了0点
4. 加载了大量数据后resize窗口，会重新计算一遍所有项目的位置、高度
5. 优化下图耗时问题

• keno-lee/vue-virt-list研究这个库
• v3-waterfall

[yeminxuan]

大佬好牛啊，看了你的源码，思路清晰，效果流畅！关键扩展性还很好，不愧是搞C的

[lhlyu]

大佬好牛啊，看了你的源码，思路清晰，效果流畅！关键扩展性还很好，不愧是搞C的

不是搞C的，最近在搞flutter，里面有些源码是C。
这个库我优化到了瓶颈，但是感觉还是不够，最近没啥思路，只能先搞其他的了。

[amumubuku]

学习了

[2383155523]

1. 内置真实高度计算方法
2. 修改虚拟列表遍历算法，改成双指针判断，为了避免特殊情况(出现一个高度非常高独占一列的元素)，必须针对每个元素进行判断

瀑布流元素整体是线性增加的，使用区间树算法并没有很好的解决元素多时计算可见元素的耗时问题

3. keep-alive路由切换时，滚动条的位置回到了0点
4. 加载了大量数据后resize窗口，会重新计算一遍所有项目的位置、高度
5. 优化下图耗时问题

我遇到了第二个问题，当瀑布流中有一张图片过长时会打乱整个布局😭 ，作者大大加油呀，毕设就靠你这组件了 嘿嘿

[lhlyu]

@2383155523 周六日有时间看看

[2383155523]

@2383155523 周六日有时间看看

嗯，我自己限制了下上传的图片的宽高，也能规避这个问题，就目前而言还是可以的。

[lhlyu]

@2383155523 周六日有时间看看

嗯，我自己限制了下上传的图片的宽高，也能规避这个问题，就目前而言还是可以的。

修复了，更新到最新版本

[2383155523]

@2383155523 周六日有时间看看

嗯，我自己限制了下上传的图片的宽高，也能规避这个问题，就目前而言还是可以的。

修复了，更新到最新版本

ok

[ayumni]

https://github.com/jaredLunde/masonic
可以参考下这个库的滚动条高度实现吗？不过是基于react实现的 好像还用到了红黑树算法，每次滚动到底加载感觉不如这种已知列表总高度舒服，支持大佬!

[lhlyu]

https://github.com/jaredLunde/masonic 可以参考下这个库的滚动条高度实现吗？不过是基于react实现的 好像还用到了红黑树算法，每次滚动到底加载感觉不如这种已知列表总高度舒服，支持大佬!

有空我看看，但是这瀑布流跟红黑树无关吧，我想到的是区间树，但是我测试过效率几乎没有提升

[mangic]

大佬，可以将视频也考虑进去吗？类似淘宝首页那种，滑动到屏幕中间时可以原地静音播放，点击图片或视频平滑放大到全屏☕️

[lhlyu]

@mangic 暂时不会考虑，你可以搜索：瀑布流+视频 看看相关的实现。点击图片或视频平滑放大到全屏，可以搜：vue3+hero动画

[mangic]

@mangic 暂时不会考虑，你可以搜索：瀑布流+视频 看看相关的实现。点击图片或视频平滑放大到全屏，可以搜：vue3+hero动画

非常优秀，学习了

[mangic]

跟在大佬后面学习，在大佬基础上增加了视频类型进入瀑布流，还在研究怎么点击图片或视频后可以平滑浮动放大预览。

[lhlyu]

@mangic

这种固定双列的，都可以不用绝对定位，直接弄两个并列的容器不就好了，新增的元素放到比较矮的一列，这样都省去了定位计算的消耗

参考

[lhlyu]

@mangic 参考文章

[mangic]

@mangic 参考文章

研究了很长时间，无法应用到瀑布流上，超出初学的理解范畴...😭

[mangic]

如何支持多虚拟列表，并在它们之间切换？🤔

[lhlyu]

@mangic

不理解你说的意思

[mangic]

@lhlyu 一个页面中有选项一和选项二、选项三等等...加载的是不同数据到前端瀑布流虚拟列表显示，点击这些选项可以切换显示互不干扰

[lhlyu]

@mangic

将一个虚拟列表封装成一个组件，每个选项页不都可以独立使用吗

[mangic]

@mangic

将一个虚拟列表封装成一个组件，每个选项页不都可以独立使用吗

@lhlyu
我采取的是这个方式，但是点击card如何原地平滑放大至全屏还是没搞起来

const currentSource = ref( 'source1');
//需要展示数据的属性
//使用一个对象存储不同数据源的状态
const data = reactive {
source1: {
page: 0, size: 30, total: 0, max: 0, list: [] as ItemOption[],
end: false,
url: 'https://XXX.XXX/XXX.php'
}
source2: {page: 0, size: 30, total: 0, max: 0, list: [] as ItemOption[],
end: false,
url: 'https://XXX.XXX/XXX.php',
｝
}) ;
//瀑布流的一些属性一
const waterfallOption = reactive ({
source1: {
loading: false, bottomDistance: 300,
onlyImage: false,onlyBody: false, topPreloadScreenCount: 1, bottomPreloadScreenCount: 1,virtual: true, gap: 8,
padding: 8, itemMinWidth: 220,
minColumnCount: 2, maxColumnCount: 10
},
source2: {loading: false, bottomDistance: 300,
onlyImage: false, onlyBody: false,
topPreloadScreenCount: 1, bottomPreloadScreenCount: 1, virtual: true, gap: 8,
padding: 8, itemMinWidth: 220, minColumnCount: 2, maxColumnCount: 8
｝）；

[lhlyu]

@mangic 你参考这个试试 https://github.com/nbonamy/vue-hero-transition

[mangic]

@mangic 你参考这个试试 https://github.com/nbonamy/vue-hero-transition

@lhlyu 针对于瀑布流这个项目，我想了一个比较傻瓜式的方法，经过测试可用
获取card父元素在X轴和Y轴相对于视口的绝对位置，在此基础上css动画

[mangic]

QQ2024107-11648-HD.mp4

[mangic]

试水了一下全屏模式，暂时还没有解决好在部分移动端环境中因为开启虚拟列表，频繁移除添加dom导致之前已经与浏览器交互的状态丢失，视频无法自动播放需要重新交互的情况。求教大佬有没有什么好的简单的方法解决

trim.195A8037-F538-4A6A-97E7-2DCA95FFB856.MOV

[lhlyu]

@mangic em...我建议你改成用grid布局或则column布局，移动端用我这个去实现你的需求很复杂

[mangic]

@mangic em...我建议你改成用grid布局或则column布局，移动端用我这个去实现你的需求很复杂

@lhlyu 我正在学习应对不同尺寸设备，使用vue3支持多列排列的瀑布流方式，感觉还是你用的这个绝对定位计算渲染出的dom位置方法最好，除此之外，性能不变的情况下可扩展性最好，目前我没有找到更容易理解的方法...

[lhlyu]

@mangic 那你可能得考虑一下keepalive

[mangic]

@mangic 那你可能得考虑一下keepalive

@lhlyu 我尝试了下面的方法有效,检查是否是微信环境,基于微信浏览器的sdk调用 WeixinJSBridge.invoke 方法来播放视频,可以在微信浏览器中调用一些原生的能力绕过一些限制,getNetworkType接口可以换其它的,只要能触发回调不影响视频播放,if (typeof WeixinJSBridge !== 'undefined') {
WeixinJSBridge.invoke('getNetworkType', {}, function () {
video.play();
});
}