当前位置:编程学习 > JS >>

js瀑布流布局

html+js:
 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style-type:none}
#div{width:925px; height:auto;margin:20px auto;}
ul{width:220px;float:left;margin:5px;}
</style>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
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       
                }
                return top;
        }
}
</script>
</head>
<body>
        <div id='div'>
                <ul>
              &nb

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,