JS布局转换

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style>
body,ul{margin:0;padding:0;}
li{list-style:none};
.clear{zoom:1}
.clear:after{content:"";display:block;clear:both;}
#box {width:200px; height:200px;margin:55px auto;}
#box ul{ width:200px; overflow:hidden;}
#box li { width:50px; height:50px; background:red; float:left; margin:5px;}
</style>

</head>

<body>
<div id="box">
    <ul class="clear">
            <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>
<script>
        
        var oUl=document.getElementsByTagName('ul')[0];
        var aLi=oUl.getElementsByTagName('li');
        var arr=[]; //定个空数组存放li浮动时候的位置；
        
        for(var i=0;i<aLi.length;i++) { // 存li浮动时的位置
                arr.push([aLi[i].offsetLeft,aLi[i].offsetTop]);        
        }
        for(var i=0;i<aLi.length;i++) { //开始转化 
                aLi[i].style.position='absolute';        //注：这里定位不能和上一个for循环在一起
                aLi[i].style.left=arr[i][0]+'px';
                aLi[i].style.top=arr[i][1]+'px';        
                aLi[i].style.margin=0;
        }

</script>

实现原理：

　　定义一个数组用以保存正常布局时 li 的位置，然后在转换为绝对定位之后在使用。

高否？富否？帅否？否？滚去学习！