V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ClearMoki
V2EX  ›  React

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

  •  
  •   ClearMoki · 2023-11-01 15:33:27 +08:00 · 1955 次点击
    这是一个创建于 389 天前的主题,其中的信息可能已经有所发展或是发生改变。
    1. 需要瀑布流;
    2. 需要虚拟滚动;
    3. 需要触底加载;
    4. 页面内容是一个个卡片,内容由文字和图片组成,但是每个卡片的高度不是固定,图片加载完成会造成高度变化
    • 已经看了 React-window ,但是没有合适的瀑布流式;
    • 看了 react-virtualized ,但是切换页面布局宽度等会造成很严重的卡顿,而滚动白屏严重;
    • 看了 TanStack Virtual ,说实话我没看懂他的 api ( qaq
    SimonTart
        1
    SimonTart  
       2023-11-01 16:01:36 +08:00
    加 wx SGVsbG9Ob2RlanM= ( base64 )聊一下呢
    qingmao
        2
    qingmao  
       2023-11-01 16:13:52 +08:00
    img 标签上 loading="lazy" 这个属性 不是原生的懒加载属性嘛,直接正常写就好了,还用库干嘛
    u3u
        3
    u3u  
       2023-11-01 16:14:29 +08:00
    u3u
        4
    u3u  
       2023-11-01 16:17:13 +08:00
    ClearMoki
        5
    ClearMoki  
    OP
       2023-11-01 16:34:12 +08:00
    @qingmao 我们业务其实需要很多卡片,很多真实 dom 节点,在页面上一但加载多了点击卡片出现抽屉就会变得很卡顿,图片现在已经用了懒加载
    ClearMoki
        6
    ClearMoki  
    OP
       2023-11-01 16:37:08 +08:00
    @u3u 感谢我看下第二个库,第一个库我之前也看了他是基于 virtualized 写的,但是他有很严重的问题,就是数据无法展示全的,而且会在尾部出现参差不全的情况
    ClearMoki
        7
    ClearMoki  
    OP
       2023-11-01 16:37:24 +08:00
    @SimonTart 好的稍等
    u3u
        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
    TArysiyehua
        9
    TArysiyehua  
       2023-11-01 17:09:21 +08:00
    @qingmao 以我半桶水的 web 技术,lazy 只是懒加载,不是虚拟加载吧,如果一直滑的话,很长很长之后也会爆内存
    ClearMoki
        10
    ClearMoki  
    OP
       2023-11-01 17:19:25 +08:00
    @u3u 感谢,ok 我重新看下这个因为当时也看到这个有一个其他问题,还有他跟 react-masonry-css 这个一样尾巴对不齐
    cian
        11
    cian  
       2023-11-01 17:42:57 +08:00 via Android
    d2ViM3d1bWluZwo= 我看看
    leokun
        12
    leokun  
       2023-11-01 18:00:16 +08:00
    @TArysiyehua 这个不一定的,数组前面的对象删除掉会被垃圾回收掉,不会爆内存
    TArysiyehua
        13
    TArysiyehua  
       2023-11-01 18:07:13 +08:00
    @leokun 这个主要不是数组对象吧,你数组里面的 图片,假设不是 base64 的数据,是一个网址,在 dom 元素上渲染成图片了,这个图片是一直占用着内存的。
    如果一直往下滑,这个图片占用的内存,没有回收机制是不会被回收的
    leokun
        14
    leokun  
       2023-11-01 18:17:05 +08:00
    @TArysiyehua 题主是 react ,数组被内容变了,与之关联的真实 dom 的节点也会一并被回收的。往下滑就是一直动态的维护一段数据(前面的都删除掉,后面的在追加),往上翻同理
    ChefIsAwesome
        15
    ChefIsAwesome  
       2023-11-01 20:27:49 +08:00
    图片后端给你的时候就应该有大小,不然你这没法写。
    renmu
        16
    renmu  
       2023-11-01 20:31:03 +08:00 via Android
    你想做好瀑布流,需要接口返回图片的宽高
    zror
        17
    zror  
       2023-11-01 20:50:36 +08:00
    zror
        18
    zror  
       2023-11-01 20:53:13 +08:00
    @zror 刚才手滑发出去了,看看这个插件里的逻辑,只能自己改改了。他里面有个 autoArrange 属性,可以再次自动排列。外层再套个瀑布流的插件,没不要找一个能完美满足你需求的,找两个组合一下也可以解决问题
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   940 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 19:35 · PVG 03:35 · LAX 11:35 · JFK 14:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.