这是一个创建于 778 天前的主题，其中的信息可能已经有所发展或是发生改变。
- 需要瀑布流；
- 需要虚拟滚动；
- 需要触底加载；
- 页面内容是一个个卡片，内容由文字和图片组成，但是每个卡片的高度不是固定，图片加载完成会造成高度变化
- 已经看了 React-window ，但是没有合适的瀑布流式；
- 看了 react-virtualized ，但是切换页面布局宽度等会造成很严重的卡顿，而滚动白屏严重；
- 看了 TanStack Virtual ，说实话我没看懂他的 api （ qaq
 | 1 SimonTart 2023-11-01 16:01:36 +08:00 加 wx SGVsbG9Ob2RlanM= （ base64 ）聊一下呢 |
 | 2 qingmao 2023-11-01 16:13:52 +08:00 img 标签上 loading="lazy" 这个属性 不是原生的懒加载属性嘛，直接正常写就好了，还用库干嘛 |
 | 3 u3u 2023-11-01 16:14:29 +08:00 |
| 4 u3u 2023-11-01 16:17:13 +08:00 |
 | 5 ClearMoki OP @qingmao 我们业务其实需要很多卡片，很多真实 dom 节点，在页面上一但加载多了点击卡片出现抽屉就会变得很卡顿，图片现在已经用了懒加载 |
| 6 ClearMoki OP @u3u 感谢我看下第二个库，第一个库我之前也看了他是基于 virtualized 写的，但是他有很严重的问题，就是数据无法展示全的，而且会在尾部出现参差不全的情况 |
| 8 u3u 2023-11-01 17:01:06 +08:00 @ClearMoki #6 不是吧 你是不是看错了 你可以看一下它的 demo 还支持 window 滚动 https://codesandbox.io/s/0oyxozv75v https://github.com/jaredLunde/masonic/tree/main#differences-from-react-virtualized |
 | 9 TArysiyehua 2023-11-01 17:09:21 +08:00 @qingmao 以我半桶水的 web 技术，lazy 只是懒加载，不是虚拟加载吧，如果一直滑的话，很长很长之后也会爆内存 |
| 10 ClearMoki OP @u3u 感谢，ok 我重新看下这个因为当时也看到这个有一个其他问题，还有他跟 react-masonry-css 这个一样尾巴对不齐 |
 | 11 cian 2023-11-01 17:42:57 +08:00 via Android d2ViM3d1bWluZwo= 我看看 |
 | 12 leokun 2023-11-01 18:00:16 +08:00 @TArysiyehua 这个不一定的，数组前面的对象删除掉会被垃圾回收掉，不会爆内存 |
| 13 TArysiyehua 2023-11-01 18:07:13 +08:00 @leokun 这个主要不是数组对象吧，你数组里面的 图片，假设不是 base64 的数据，是一个网址，在 dom 元素上渲染成图片了，这个图片是一直占用着内存的。 如果一直往下滑，这个图片占用的内存，没有回收机制是不会被回收的 |
| 14 leokun 2023-11-01 18:17:05 +08:00 @TArysiyehua 题主是 react ，数组被内容变了，与之关联的真实 dom 的节点也会一并被回收的。往下滑就是一直动态的维护一段数据(前面的都删除掉，后面的在追加)，往上翻同理 |
 | 15 ChefIsAwesome 2023-11-01 20:27:49 +08:00 图片后端给你的时候就应该有大小，不然你这没法写。 |
 | 16 renmu 2023-11-01 20:31:03 +08:00 via Android 你想做好瀑布流，需要接口返回图片的宽高 |
 | 17 zror 2023-11-01 20:50:36 +08:00 |
Select Language