Ajax实例-固定列数的瀑布流

来源：互联网发布：网络犯罪防范手段编辑：程序博客网时间：2024/05/16 19:42

前端页面：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            *{                margin: 0;                padding: 0;            }            body{                background: #EDEDED;            }            #ul1{                width: 1000px;                margin: 0 auto;                list-style: none;                overflow: hidden;                background: #fff;            }            #ul1 li{                width: 240px;                float: left;                margin: 0 5px;                padding: 20px 0;            }            #ul1 li div{                width: 220px;                padding: 9px;                border: 1px solid #999;                margin-bottom: 10px;            }            #ul1 li div img{                width: 220px;                display: block;            }        </style>        <script src="ajax.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">            window.onload=function(){                var oUl=document.getElementById("ul1");                var aLi=oUl.getElementsByTagName('li');                var iLen=aLi.length;                var ipage=1;                var flag=true;//定义一个开关，用于控制页面数据的加载                getList();  //初始加载第一页(cpage=1)的数据                function getList(){                    ajax('get','getPics.php','cpage='+ipage,function(data){                        var data=JSON.parse(data);//字符串转对象                        if (!data.length) {                            //数据加载完成                            return;                        }                        var leng=data.length;                        for (var i=0; i<leng; i++) {//循环每个数据，每次都往最短的li里添加数据                            var _index=getShort();//最短li的索引                            var oDiv=document.createElement('div');                            var oImg=document.createElement('img');                            oImg.src=data[i].preview;//预览图                            oImg.style.height=220*data[i].height/data[i].width+'px'; //换算后的预览图高度                            oDiv.appendChild(oImg);                            var oP=document.createElement('p');                            oP.innerHTML=data[i].title;                            oDiv.appendChild(oP);                            aLi[_index].appendChild(oDiv);  //往最短的li里面添加数据                        }                        //循环结束之后（本页所有数据加载完成之后）才能打开开关，才可加载下一页                        flag=true;                    })                }                //滚动鼠标触发                window.onscroll=function(){                    var _index=getShort();                    var oLi=aLi[_index];                    var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;                    //当 最短li的高度加上到页面的距离 小于 滚动条高度加上屏幕的高度 时加载第二页（cpage=1）的数据                    if (getTop(oLi)+oLi.offsetHeight < document.documentElement.clientHeight+scrollTop) {                        if (flag) {                            flag=false;//关上开关，防止在当前页面加载完成前继续加载其他页面                            ipage++;//加载下一页数据                            getList();                        }                    }                }                //获取最短li的索引值                function getShort(){                    var index=0;                     var ih=aLi[index].offsetHeight;                    for (var i=1; i<iLen; i++) {                        if (aLi[i].offsetHeight<ih) {                            index=i;                            ih=aLi[i].offsetHeight;                        }                    }                    return index;                }                //获取元素到页面最顶端的距离                function getTop(obj){                    var iTop=0;                    while(obj){                        iTop+=obj.offsetTop;                        obj=obj.offsetParent;                    }                    return iTop;                }            }        </script>    </head>    <body>        <ul id="ul1">            <li></li>            <li></li>            <li></li>            <li></li>        </ul>    </body></html>

php代码：

<?phpheader('Content-type:text/html; charset="utf-8"');/*API:    getPics.php    参数        cpage : 获取数据的页数*/$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;?>

返回数据：

[    {"id":"630642",    "referer":"https:\/\/www.behance.net\/gallery\/10983193\/Clara-Daniel",    "url":"http:\/\/www.wookmark.com\/image\/630642\/clara-daniel-on",    "width":"600",    "height":"513",    "image":"http:\/\/www.wookmark.com\/images\/original\/630642_wookmark.jpg",    "preview":"http:\/\/www.wookmark.com\/images\/thumbs\/630642_wookmark.jpg"},    …]

Ajax.js：

function ajax(method, url, data, success) {    var xhr = null;    try {        xhr = new XMLHttpRequest();    } catch (e) {        xhr = new ActiveXObject('Microsoft.XMLHTTP');    }    if (method == 'get' && data) {        url += '?' + data;    }    xhr.open(method,url,true);    if (method == 'get') {        xhr.send();    } else {        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');        xhr.send(data);    }    xhr.onreadystatechange = function() {        if ( xhr.readyState == 4 ) {            if ( xhr.status == 200 ) {                success && success(xhr.responseText);            } else {                alert('出错了,Err：' + xhr.status);            }        }    }}

0 0