隐藏重新渲染的时候，初始化位置会错位，数据为动态数据 about waterfalljs HOT 8 CLOSED

@Aliujiayu 点击取消按钮是做了什么操作？
能不能提供一个最小化复现的 demo，用 codesandbox 或是 stackblitz

from waterfalljs.

mode='grid'好使，position有问题，
点击取消的时候仅仅只是将uploadList置为空数组
<Waterfall mode='grid' columnWidth={168} columnCount={2} columnGap={10} rowGap={10} customStyle={customStyle} onChangeUlMaxH={(h) => (ulMaxHRef.current = h)} > {uploadList.length > 0 && uploadList.map((page, index) => { return ( <li key={index}> <div className={uploadIndex == index ? "border-solid border-1px border-#FF7E00 cursor-pointer" : "cursor-pointer"} > <img src={page.imageUrl.split("?")[0]} alt="" style={{ height: 30*index*0.3 + "px" }} onClick={() => { if(uploadIndex == index) { stateChange("uploadIndex", -1); return } stateChange("uploadIndex", index); }} /> </div> </li> ) })} </Waterfall>

from waterfalljs.

@Aliujiayu 兄弟，稍微走心一点，不愿意搞 codesandbox ，好歹把代码格式化一下再发出来🥹🥹

position 失效的原因是： position 是因为组件在初始化时已经计算过各个item的位置信息了，position方案需要把每个 item 的 left top 都计算出来才能布局，因为你之前已经计算过了，你只是把数据清空，但之前计算过的信息还在那里，所以你再次填充数据的时候他会继续你之前计算过的往下计算.

解决方案你重新加载一下 waterfall 组件
方法：给 waterfall 组件加个 key 当你清空数据的时候去改变 key

另外， grid 没问题是因为 grid 不需要计算位置信息，只是单纯的css布局，所以不会有问题

from waterfalljs.

啊，*瑞啊，不咋提issues，我选了code，以为是发出去代码就格式了，直接cv进去了，没想到是乱的，不过我整块cv的，就里面我的代码是啥无所谓，就没再改，以后注意...
失效原因我大概猜出来了，感谢解答，我试试改变key

from waterfalljs.

@Aliujiayu 兄弟如果好使的话，来个 star ，不过分吧😅

from waterfalljs.

不好意思，好不好使都应该点个，现在点

我给加了个随机数，应该每次重新渲染的时候都会变，position模式下情况还是偏的离谱，但加了key之后解决了grid模式下的另一个问题，我这个组件要兼顾图片和视频，每次切换的时候，另一个都会跑偏的比较离谱，加了key以后，这个问题没了，证明key是生效的。

然后我这边有一个新问题，和上面那个无关，我li>div下面是video的时候，没法撑成视频的高度（第一次打开是视频的时候也是，这里没涉及到切换），这个不知道怎么修改，我平时布局为flex，grid基本不使用，请帮忙指点一下，感谢！

from waterfalljs.

用 https://codesandbox.io/ 做一个最小化的复现 demo，我帮你看一下，不然你这么描述我也猜不到你遇到啥问题 @Aliujiayu

from waterfalljs.

暂时我先搞定了，但肯定还有问题，目前先凑合一下，先谢谢作者了，我主要是不会用codesandbox🤣，等我把这个项目忙完了，在专门琢磨一下这个，谢谢哈，方便的话能否加个微信，那样沟通方便一点，再次感谢

from waterfalljs.