绝对定位：JS照样实现瀑布流式布局

一夜之间 似乎互联网上出现了一种类似瀑布形式的网页布局，如美丽说、蘑菇街等网站都采用这种布局形式。常见的实现方法一般分为：传统多列浮动 、CSS3 定义、绝对定位。 笔者看到网上仅仅有关于CSS的详细教程，未见有绝对定位的相关教程。现在想和各位朋友们分享一下绝对定位的应用及具体代码，希望朋友们能够指出其中的不足之处。
　　

	
 
　　JS的绝对定位分解成三个部分代码，这样清晰，方便查看代码，其中包括： Javascript代码、HTML代码、[AJax封装文件 代码。
 [Javaｓｃｒｉｐｔ]代码
<ｓｃｒｉｐｔ type="text/javaｓｃｒｉｐｔ" src="ajax.js"></ｓｃｒｉｐｔ>
<ｓｃｒｉｐｔ type="text/javaｓｃｒｉｐｔ">
window.onload=function()
{
        var oDiv =document.getElementById("div");
        var oUl=document.getElementsByTagName("ul");
        window.onscroll=function()
        {
                var clientH=document.documentElement.clientHeight;
                var scrollH=document.documentElement.scrollTop||document.body.scrollTop;
                for(var i=0;i<oUl.length;i++)
                {
                        var aLi=oUl[i].getElementsByTagName("li")
                        var lastL=aLi[aLi.length-1];
                        if(toTop(lastL)<clientH+scrollH)
                        {
                                ajax("a.js",function(str)
                                {
                                        var json = eval('('+str+')')
                                        for(var i=0;i<json.list.length;i++)
                                        {
                                                var list=json.list[i];
                                                for(var j=0;j<list.src.length;j++)
                                                {
                                                        var oLi=document.createElement("li")
                                                        oLi.innerHTML='<img src="'+list.src[j]+'"><p>'+list.title[j]+'</p>'
                                                        oUl[i].appendChild(oLi);
                                                }
                                        }
                                })
                        }
                }
        }
 
        function toTop(obj)
        {
                var top=0;
                while(obj)
                {
                        top +=obj.offsetTop;
                        obj=obj.offsetParent       
        &nbs

补充：web前端 , HTML/CSS  ,

上一个：PSD转div css网页切图示例
下一个：设计就是生产力：让用户更容易找到信息