这是一个创建于 422 天前的主题，其中的信息可能已经有所发展或是发生改变。
- 需要瀑布流；
- 需要虚拟滚动；
- 需要触底加载；
- 页面内容是一个个卡片，内容由文字和图片组成，但是每个卡片的高度不是固定，图片加载完成会造成高度变化
- 已经看了 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