乐趣区

关于javascript:文档流的转换

九宫格布局案例

文档流的转换:绝对定位 => 相对定位

1. 失常状况下,当鼠标挪动到某一块时,某一块变大。所以布局的时候绝对定位,理论放大的时候是相对定位

独自给某一块设置放大款式时遇到了问题,放大的块把之后的块挤下去了。

所以咱们要进行文档流的转换,绝对定位 => 相对定位

 #ul1 li
 {
     list-style: none;width: 100px;height: 100px;border: 1px solid black;
     margin: 10px;float: left;background-color: gray;
 }
 #ul1
 {
     width: 366px; height: 366px; border: 1px solid black;margin: 100px auto;
     position: relative;
 }

 <ul id="ul1">
     <li></li>
     <li style="width: 200px;height: 200px;"></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
 </ul>

2. 进行文档流转换,这里切记,一个遍历不能同时设置坐标和 absolute,

谬误示范:同一个遍历设置坐标和 absolute

 for(var i=0; i<aLis.length; i++)
 {aLis[i].style.left=aLis[i].offsetLeft + "px";
     aLis[i].style.top=aLis[i].offsetTop + "px";
     aLis[i].style.position="absolute";
 }

起因是当第一个块设置成 absolute 时,就脱离层级了,后边块就跟上往前顶,最初重合到一起,

所以离开写两个遍历别离设置坐标和 absolute。

 var oUl1=document.getElementById("ul1");
 var aLis=oUl1.getElementsByClassName("li");
 for(var i=0; i<aLis.length; i++)
 {aLis[i].style.left=aLis[i].offsetLeft + "px";
     aLis[i].style.top=aLis[i].offsetTop + "px";
 }
 for(var i=0; i<aLis.length; i++)
 {aLis[i].style.position="absolute";
 }

3. 这时也有一个问题小问题。咱们在之前的绝对定位盒模型中 #ul1 li 中设置了 margin:10px;所有块会放弃间距向右下角偏移。咱们设置了相对定位之后就没有必要放弃实时距离。

 #ul1 li
 {
     list-style: none;width: 100px;height: 100px;border: 1px solid black;
     margin: 10px;float: left;background-color: gray;
 }

所以在设置相对定位的同时,也将 margin 设置成 0。最初文档流转换:绝对定位 => 相对定位 功败垂成

 var oUl1=document.getElementById("ul1");
 var aLis  =oUl1.getElementsByTagName("li");
 for(var i=0; i<aLis.length; i++)
 {aLis[i].style.left=aLis[i].offsetLeft + "px";
     aLis[i].style.top=aLis[i].offsetTop + "px";

 }
 for(var i=0; i<aLis.length; i++)
 {aLis[i].style.position="absolute";
     aLis[i].style.margin="0px";
 }

退出移动版