offsetLeft引发的瀑布流错乱

这一个小伙伴发来的瀑布流的demo

那问题是什么呢

大家看当我缩放浏览器的时候

缩小没问题

但是我在放大大家看

他都挤在一起了

那这个问题怎么找呢

因为他都是在缩放浏览器出现的问题

所以呢我们全局搜一下resize

找到他这个resize事件

这里边一共做了两个逻辑

第一个呢就是处理他(外部)容器的宽度

然后主要是第二个我们点进去

点进去之后

这个方法前面的代码先不用看哈

我们主要看这个

items i style点left

为什么看这个呢

因为很明显

他现在下边的内容都挤到一边了

至于他垂直方向位置对不对

我们现在看不出来

我们先解决最明显的他都挤到左边了

所以呢我们先来看这个left

那这个left他有什么问题呢

大家看他在这获取了

其他元素的offset left

为什么这样会有问题呢

原因是他在上面

他在前面的循环里边

可能已经改过了某个元素的left

但是呢这个方法没做完

很明显我们这里拿不到他最新的值

这个offsetLeft还是他修改之前的值

那怎么办呢

所以我们这里不能用offsetLeft了

我们用什么呢

style.left

再来试一下啊

重启一下

好刷新

大家看啊

哎可以了

那也就是说他这个top是没问题的

唯一的问题就是这个left不准

所以(特定场景下)我们在用offsetLeft的时候

一定要小心

除非我们就是想

获取他修改之前的这个值

最后更新于