为什么要布局转换？

要这样的效果，单写css，只要给每个li浮动就行，不需要绝对定位。但是比如做一些效果（如鼠标移入图片变大），就需要改变位置了。直接给每个li在css上定好位置不方便，也不知道有几个li

 

<ul id="ul1">

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

 

#ul1{position: relative; width: 500px; margin: 20px auto;}

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

window.οnlοad=function(){

    var ul1=document.getElementById("ul1");

    var oLi=ul1.getElementsByTagName("li");

    var i=0;

    for(i=0;i<oLi.length;i++){

        oLi[i].style.left=oLi[i].offsetLeft+'px';

        oLi[i].style.top=oLi[i].offsetTop+'px';        

    }

    for(i=0;i<oLi.length;i++){

        oLi[i].style.position='absolute';      //定好位置再循环设position，直接在上面设，会揉成一个li

        oLi[i].style.margin='0';

    }

};