求大佬帮忙，有偿写一个 React 虚拟滚动的瀑布流的组件

[ClearMoki]

1. 需要瀑布流；
2. 需要虚拟滚动；
3. 需要触底加载；
4. 页面内容是一个个卡片，内容由文字和图片组成，但是每个卡片的高度不是固定，图片加载完成会造成高度变化

• 已经看了 React-window ，但是没有合适的瀑布流式；
• 看了 react-virtualized ，但是切换页面布局宽度等会造成很严重的卡顿，而滚动白屏严重；
• 看了 TanStack Virtual ，说实话我没看懂他的 api （ qaq

[SimonTart]

加 wx SGVsbG9Ob2RlanM= （ base64 ）聊一下呢

[qingmao]

img 标签上 loading="lazy" 这个属性 不是原生的懒加载属性嘛，直接正常写就好了，还用库干嘛

[u3u]

https://github.com/jaredLunde/masonic

[u3u]

https://naver.github.io/egjs-infinitegrid/

[ClearMoki]

@qingmao 我们业务其实需要很多卡片，很多真实 dom 节点，在页面上一但加载多了点击卡片出现抽屉就会变得很卡顿，图片现在已经用了懒加载

[ClearMoki]

@u3u 感谢我看下第二个库，第一个库我之前也看了他是基于 virtualized 写的，但是他有很严重的问题，就是数据无法展示全的，而且会在尾部出现参差不全的情况

[ClearMoki]

@SimonTart 好的稍等

[u3u]

@ClearMoki #6 不是吧 你是不是看错了 你可以看一下它的 demo 还支持 window 滚动
https://codesandbox.io/s/0oyxozv75v
https://github.com/jaredLunde/masonic/tree/main#differences-from-react-virtualized

[TArysiyehua]

@qingmao 以我半桶水的 web 技术，lazy 只是懒加载，不是虚拟加载吧，如果一直滑的话，很长很长之后也会爆内存

[ClearMoki]

@u3u 感谢，ok 我重新看下这个因为当时也看到这个有一个其他问题，还有他跟 react-masonry-css 这个一样尾巴对不齐

[cian]

d2ViM3d1bWluZwo= 我看看

[leokun]

@TArysiyehua 这个不一定的，数组前面的对象删除掉会被垃圾回收掉，不会爆内存

[TArysiyehua]

@leokun 这个主要不是数组对象吧，你数组里面的 图片，假设不是 base64 的数据，是一个网址，在 dom 元素上渲染成图片了，这个图片是一直占用着内存的。
如果一直往下滑，这个图片占用的内存，没有回收机制是不会被回收的

[leokun]

@TArysiyehua 题主是 react ，数组被内容变了，与之关联的真实 dom 的节点也会一并被回收的。往下滑就是一直动态的维护一段数据(前面的都删除掉，后面的在追加)，往上翻同理

[ChefIsAwesome]

图片后端给你的时候就应该有大小，不然你这没法写。

[renmu]

你想做好瀑布流，需要接口返回图片的宽高

[zror]

https://github.com/GoncharukBro/react-smart-masonry

[zror]

@zror 刚才手滑发出去了，看看这个插件里的逻辑，只能自己改改了。他里面有个 autoArrange 属性，可以再次自动排列。外层再套个瀑布流的插件，没不要找一个能完美满足你需求的，找两个组合一下也可以解决问题