首页 > 网站 > 建站经验 > 正文

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

2024-04-25 20:27:53
字体:
来源:转载
供稿:网友

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

  

 

  JS的绝对定位分解成三个部分代码,这样清晰,方便查看代码,其中包括: Javascript代码、HTML代码、[AJax封装文件 代码。

 [Javascript]代码

<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")

共4页上一页1234下一页
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表