ajax瀑布流

来源：互联网发布：录制视频软件下载编辑：程序博客网时间：2024/06/04 17:48

首先要有必要的PHP接口技术。去获取部分数据

接口代码如下：

<?phpheader('Content-type:text/html; charset="utf-8"');$cpage = isset($_GET['cpage']) ? $_GET['cpage'] : 1;$url = 'http://www.wookmark.com/api/json/popular?page=' . $cpage;$content = file_get_contents($url);$content = iconv('gbk', 'utf-8', $content);echo $content;?>

二、搭结构并布局（html+css）;

<body>    <ul id="ul1">        <li></li>        <li></li>        <li></li>        <li></li>    </ul></body>

<style>body {margin: 0;}#ul1 {width: 1080px; margin: 100px auto 0;}li { width: 247px; list-style: none; float: left; margin-right: 10px; }li div {border: 1px solid #000; padding: 10px; margin-bottom: 10px;}li div img { width: 225px; display: block;}</style>

三、最重要的开始了

1、获取DOM节点并初始化数据

var oUl=document.getElementById('ul1');var aLi=oUl.getElementsByTagName('li');var ipage=1;ajaxFN();var b=true;

2、通过数据接口文件getPics.php获取数据。然后创建对象并插入到li里面

function ajaxFN(){                //通过数据接口文件getPics.php获取数据。然后插入到li里面                ajax('get','getPics.php','cpage'+ipage,function(data){                var data=JSON.parse(data);                  for(var i=0;i<data.length;i++){                    var Index=getShort();                    var oDiv=document.createElement('div');                    var oImg=document.createElement('img');                    oImg.src=data[i].preview;                    oImg.style.width=225+'px';                    oImg.style.height=data[i].height*(225/data[i].width)+'px';                    oDiv.appendChild(oImg);                    var oP=document.createElement('p');                    oP.innerHTML=data[i].title;                    oDiv.appendChild(oP);                                       aLi[Index].appendChild(oDiv);                                   }                           });            return b=true;        }               function getShort(){            var index=0;            var minLiH=aLi[index].offsetHeight;            for(var i=0;i<aLi.length;i++){                          if(minLiH>aLi[i].offsetHeight){                                                     minLiH=aLi[i].offsetHeight;                    index=i;                }            }            return index;        }

四、当页面向下滑动的距离比最小的li的高度还小的时候、就触发ajaxFN（）函数加载第二页的内容；

    window.onscroll=function(){            var index2=getShort();            var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;            var PH=document.documentElement.clientHeight;            if(PH+scrollTop>aLi[index2].offsetHeight+aLi[index2].offsetTop){                if(b){                    b=false;                    ipage++;                    ajaxFN();                                   }                           }        };          };

全部代码

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>body {margin: 0;}#ul1 {width: 1080px; margin: 100px auto 0;}li { width: 247px; list-style: none; float: left; margin-right: 10px; }li div {border: 1px solid crimson; padding: 10px; margin-bottom: 10px;}li div img { width: 225px; display: block;}</style><script src="ajax.js"></script><script type="text/javascript">    window.onload=function(){        //初始化数据        var oUl=document.getElementById('ul1');        var aLi=oUl.getElementsByTagName('li');        var ipage=1;        ajaxFN();        var b=true;//--------------------------------------------------------------------                      function ajaxFN(){                //通过数据接口文件getPics.php获取数据。然后插入到li里面                ajax('get','getPics.php','cpage'+ipage,function(data){                var data=JSON.parse(data);            //  alert(data.length);                for(var i=0;i<data.length;i++){                    var Index=getShort();                    var oDiv=document.createElement('div');                    var oImg=document.createElement('img');                    oImg.src=data[i].preview;                    oImg.style.width=225+'px';                    oImg.style.height=data[i].height*(225/data[i].width)+'px';                    oDiv.appendChild(oImg);                    var oP=document.createElement('p');                    oP.innerHTML=data[i].title;                    oDiv.appendChild(oP);                    aLi[Index].appendChild(oDiv);                                   }                           });            return b=true;        }//--------------------------------------------------------------------                      function getShort(){            var index=0;            var minLiH=aLi[index].offsetHeight;            for(var i=0;i<aLi.length;i++){                if(minLiH>aLi[i].offsetHeight){                                                         minLiH=aLi[i].offsetHeight;                    index=i;                }            }            return index;        }//--------------------------------------------------------------------              window.onscroll=function(){            var index2=getShort();            var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;            var PH=document.documentElement.clientHeight;            if(PH+scrollTop>aLi[index2].offsetHeight+aLi[index2].offsetTop){                if(b){                    b=false;                    ipage++;                    ajaxFN();                                   }                           }        };          };</script></head><body>    <ul id="ul1">        <li></li>        <li></li>        <li></li>        <li></li>    </ul></body></html>

每日清新
这里写图片描述

作者：王华桥

0 0