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

关注

原创最新推荐文章于 2021-08-05 19:17:58 发布 1k 阅读 AI 写同款· GEO 优化 ›

瀑布流分页数据去重问题 1. 问题描述将分页、降序数据用瀑布流展示的时候，因为数据总量是不断变化的，导致之前第一页的数据可能变成第二页，第三页，这样客户查看的时候可能出现重复数据展示。（最新的数据会插到列表的最前端）。典型的是活动参与人列表页，因为这部分数据对于业务方来说可能非常重要，不能出现任何的重复或者顺序显示的不对。2. 实际场景用户按照分页降序请求瀑布流数据的时候，请求完第一页，在该页停留了 5 分钟，这段时间内阅读详情

前端页面：

<!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代码：

<?php
header('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);
            }
        }

    }
}