首页建站经验 绝对定位:JS照样实现瀑布流式布局

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

  一夜之间 似乎互联网上出现了一种类似瀑布形式的网页布局,如美丽说、蘑菇街等网站都采用这种布局形式。常见的实现方法一般分为:传统多列浮动 、CSS3 定义、绝对定位。…

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

  

 

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

 [Javascript]代码

<script type="text/javascript" src="ajax.js">

<script type="text/javascript">

window.onload=function()

{

        var oDiv =document.getElementById("p");

        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

                {

                        var aLi=oUl[i].getElementsByTagName("li")

                        var lastL=aLi[aLi.length-1];

                        if(toTop(lastL)

                        {

                                ajax("a.js",function(str)

                                {

                                        var json = eval('('+str+')')

                                        for(var i=0;i

                                        {

                                                var list=json.list[i];

                                                for(var j=0;j

                                                {

                                                        var oLi=document.createElement("li")

本文来自网络,不代表1号站长-站长学院|资讯交流平台立场。转载请注明出处: https://www.1cn.cc/jianzhan/jingyan/14749.html
上一篇云数据-租用香港服务器有哪些优点呢?
下一篇 有效增加网站外部链接的途径和注意事项
admin

作者: admin

这里可以再内容模板定义一些文字和说明,也可以调用对应作者的简介!或者做一些网站的描述之类的文字或者HTML!

为您推荐

评论列表()

    联系我们

    联系我们

    0898-88888888

    在线咨询: QQ交谈

    邮箱: email@wangzhan.com

    工作时间:周一至周五,9:00-17:30,节假日休息

    关注微信
    微信扫一扫关注我们

    微信扫一扫关注我们

    关注微博
    返回顶部