鍍金池/ 問答/HTML/ for循環(huán)的這2種寫法為什么顯示的結(jié)果卻不一樣

for循環(huán)的這2種寫法為什么顯示的結(jié)果卻不一樣

demo的目的是把浮動布局的li在js里轉(zhuǎn)成絕對定位。但關(guān)于for循環(huán)的寫法，本來是第一種寫法，沒有問題。想給優(yōu)化一些，就改成一個for循環(huán)，但卻布局顯示錯誤。請問為什么第二種寫法是錯的？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin: 0;padding: 0;}
 ul{list-style: none;}
 #ul1{width: 330px;height:330px;margin: 0 auto;position: relative;border: 1px solid #000;}
 li{width: 100px;height: 100px;background-color: red;float: left;margin: 10px 0 0 10px;}
</style>
</head>
<body>
    <ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<script>
var ul1=document.getElementById('ul1');
var ali=ul1.getElementsByTagName('li');
var arr=[];
<!-- 第一種寫法開始(正常顯示) -->
<!-- for (var i = 0; i < ali.length; i++) {
    arr.push({left:ali[i].offsetLeft,top:ali[i].offsetTop});
}
for (var i = 0; i < ali.length; i++) {
    ali[i].style.position='absolute';
    ali[i].style.left=arr[i].left+'px';
    ali[i].style.top=arr[i].top+'px';
    ali[i].style.margin='0px';
}-->
<!-- 第一種寫法結(jié)束 -->

<!-- 第二種寫法開始(不正常顯示) -->
for (var i = 0; i < ali.length; i++) {
    arr.push({left:ali[i].offsetLeft,top:ali[i].offsetTop});
    ali[i].style.position='absolute';
    ali[i].style.left=arr[i].left+'px';
    ali[i].style.top=arr[i].top+'px';
    ali[i].style.margin='0px';
}
</script> 
</html>
回答
編輯回答
陪我終

ali[i].offsetLeft 這種寫法是很菜的寫法，因?yàn)檫@樣會讓瀏覽器強(qiáng)制刷新重排緩沖區(qū)，從而多次觸發(fā)重排。
建議使用一個class控制下面li的屬性一次性添加，JS添加class完成效果

2017年5月20日 07:42
編輯回答
澐染

你這有病吧，一個循序能搞定的事情為什么要寫兩個循環(huán)

2017年9月5日 16:33
編輯回答
凝雅

剛剛測試第二種寫法，console.log(arr[i]);輸出的值全部相同。想起這個demo的視頻里老師說的話。在同一代碼塊中，ali[i].style.position='absolute';即使寫在下面，執(zhí)行的順序也是比有些代碼要提前。即每次循環(huán)都是行ali[i].style.position='absolute';，這樣一來，每個li的left值和top值都是10，所以再執(zhí)行arr.push({left:ali[i].offsetLeft,top:ali[i].offsetTop});時獲取到的也都是一樣的。
本來是覺得視頻里老師這種分代碼塊的寫法有點(diǎn)費(fèi)事，自己改用其他方法重寫案例，結(jié)果還是有這個分代碼塊的問題。
受了樓上的回答的提示，總算明白怎么回事了。

2017年8月17日 15:02
編輯回答
不討喜

因?yàn)闃菢窃瓉淼膌i是左浮動的，
for循環(huán)中l(wèi)i是一個個被賦予了absolute定位。
當(dāng)?shù)谝粋€li被賦予absolute定位時候，它會移動到第一個塊的位置，也就是left和top都是10px，因?yàn)榈谝粋€li脫離了，所以后面的也自然補(bǔ)上了，所以這個時候第二個li就也會出現(xiàn)在left和top是10px的地方，同樣后面的也前移動了。很巧合，以此類推，結(jié)果一不小心就都取到了left和top是10px，也就都湊在一起了。

2017年5月11日 23:18