offsetLeft引发的瀑布流错乱
最后更新于
最后更新于
这一个小伙伴发来的瀑布流的demo
那问题是什么呢
大家看当我缩放浏览器的时候
缩小没问题
但是我在放大大家看
他都挤在一起了
那这个问题怎么找呢
因为他都是在缩放浏览器出现的问题
所以呢我们全局搜一下resize
找到他这个resize事件
这里边一共做了两个逻辑
第一个呢就是处理他（外部）容器的宽度
然后主要是第二个我们点进去
点进去之后
这个方法前面的代码先不用看哈
我们主要看这个
items i style点left
为什么看这个呢
因为很明显
他现在下边的内容都挤到一边了
至于他垂直方向位置对不对
我们现在看不出来
我们先解决最明显的他都挤到左边了
所以呢我们先来看这个left
那这个left他有什么问题呢
大家看他在这获取了
其他元素的offset left
为什么这样会有问题呢
原因是他在上面
他在前面的循环里边
可能已经改过了某个元素的left
但是呢这个方法没做完
很明显我们这里拿不到他最新的值
这个offsetLeft还是他修改之前的值
那怎么办呢
所以我们这里不能用offsetLeft了
我们用什么呢
style.left
再来试一下啊
重启一下
好刷新
大家看啊
哎可以了
那也就是说他这个top是没问题的
唯一的问题就是这个left不准
所以（特定场景下）我们在用offsetLeft的时候
一定要小心
除非我们就是想
获取他修改之前的这个值