# offsetLeft引发的瀑布流错乱
{% embed url="" %}
{% embed url="" %}
这一个小伙伴发来的瀑布流的demo
那问题是什么呢
大家看当我缩放浏览器的时候
缩小没问题
但是我在放大大家看
他都挤在一起了
那这个问题怎么找呢
因为他都是在缩放浏览器出现的问题
所以呢我们全局搜一下resize
找到他这个resize事件
这里边一共做了两个逻辑
第一个呢就是处理他（外部）容器的宽度
然后主要是第二个我们点进去
点进去之后
这个方法前面的代码先不用看哈
我们主要看这个
items i style点left
为什么看这个呢
因为很明显
他现在下边的内容都挤到一边了
至于他垂直方向位置对不对
我们现在看不出来
我们先解决最明显的他都挤到左边了
所以呢我们先来看这个left
那这个left他有什么问题呢
大家看他在这获取了
其他元素的offset left
为什么这样会有问题呢
原因是他在上面
他在前面的循环里边
可能已经改过了某个元素的left
但是呢这个方法没做完
很明显我们这里拿不到他最新的值
这个offsetLeft还是他修改之前的值
那怎么办呢
所以我们这里不能用offsetLeft了
我们用什么呢
style.left
再来试一下啊
重启一下
好刷新
大家看啊
哎可以了
那也就是说他这个top是没问题的
唯一的问题就是这个left不准
所以（特定场景下）我们在用offsetLeft的时候
一定要小心
除非我们就是想
获取他修改之前的这个值
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://sunzsh.gitbook.io/xiaoshan.bug/offsetleft-yin-fa-de-pu-bu-liu-cuo-luan.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.