瀑布流AJAX無刷新加載數據列表--當頁面滾動到Id時再繼續加載數據

時間 2019-11-08
原文原文鏈接
瀑布流加載顯示數據，在當下已經用的很廣泛，尤爲是咱們在作網上商城時，在產品列表頁面已經被廣泛使用。javascript
對於實現瀑布流佈局的解決方案主要有如下兩種方式：css
一、對每一條顯示數據使用絕對定位+浮動的方式，這樣也會有一個問題----必需要知道每一條信息的具體高寬度html
二、採用列布局，將每一條數據依次放置到每一列java
其實二者的實現原理都是大同小異，如今我將針對第二種解決方案，用一個具體的事例來講明jquery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    body,ul,li{margin:0;margin:0;}
    ul{list-style:none;}
    .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both; height:0;}.clearfix{*zoom:1}
    /*瀑布流*/
    /*.wallList{width:860px;}*/
    .wallList li{float:left;display:inline;margin-right:16px;}
    .wallList li a{background:#eee;border:1px solid #ccc;padding:5px 5px 0 5px;display:block;margin-bottom:10px;}
    .wallList li a:hover{border-color:#f60;}
    .wallList li .name{display:block;text-align:center;padding:8px 0;} 

    .loadTips{text-align:center;padding:15px 0;}
    </style>
</head>
<body>
    <div class="wallList" id="wallList">
        <ul class="clearfix">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <p class="loadTips" id="loadTips">
            19880902 <span>正在加載......</span></p>
    </div>
</body>
</html>
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
    // 數據格式
    var testJson = {
        "status": 1,
        "data": [
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x300/B5E61D/fff", "width": 240, "height": 300, "name": "圖片1" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/333/fff", "width": 240, "height": 210, "name": "圖片2" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x190/f60/fff", "width": 240, "height": 190, "name": "圖片3" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name": "圖片4" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name": "圖片5" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x260/eee/fff", "width": 240, "height": 260, "name": "圖片6" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x180/000/fff", "width": 240, "height": 180, "name": "圖片7" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x240/B5E61D/fff", "width": 240, "height": 240, "name": "圖片8" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x265/B5E61D/fff", "width": 240, "height": 265, "name": "圖片9" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x245/259/fff", "width": 240, "height": 245, "name": "圖片10" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x310/B5E61D/fff", "width": 240, "height": 310, "name": "圖片11" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name": "圖片12" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x150/B5E61D/fff", "width": 240, "height": 150, "name": "圖片13" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x165/B5E61D/fff", "width": 240, "height": 165, "name": "圖片14" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x100/B5E61D/fff", "width": 240, "height": 100, "name": "圖片15" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name": "圖片16" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x225/B5E61D/fff", "width": 240, "height": 225, "name": "圖片17" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name": "圖片18" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name": "圖片19" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name": "圖片20" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x300/B5E61D/fff", "width": 240, "height": 300, "name": "圖片21" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/333/fff", "width": 240, "height": 210, "name": "圖片22" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x190/f60/fff", "width": 240, "height": 190, "name": "圖片23" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name": "圖片24" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name": "圖片25" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/eee/fff", "width": 240, "height": 210, "name": "圖片26" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x180/000/fff", "width": 240, "height": 180, "name": "圖片27" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x240/B5E61D/fff", "width": 240, "height": 240, "name": "圖片28" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x195/B5E61D/fff", "width": 240, "height": 195, "name": "圖片29" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name": "圖片30" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x300/B5E61D/fff", "width": 240, "height": 300, "name": "圖片31" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/333/fff", "width": 240, "height": 210, "name": "圖片32" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x190/f60/fff", "width": 240, "height": 190, "name": "圖片33" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name": "圖片34" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name": "圖片35" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/eee/fff", "width": 240, "height": 210, "name": "圖片36" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x180/000/fff", "width": 240, "height": 180, "name": "圖片37" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x240/B5E61D/fff", "width": 240, "height": 240, "name": "圖片38" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x195/B5E61D/fff", "width": 240, "height": 195, "name": "圖片39" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x245/259/fff", "width": 240, "height": 245, "name": "圖片40" }
        ]
    }

    var wallPic = function () {
        var $target = $('#wallList'),
            $li = $target.find('li'),
            $tips = $('#loadTips'),
            oTop = 0, //滾動判斷的值
            row = 5, //列數
            page = 1, //ajax請求的頁碼值
            url = 'xxxx', //ajax請求地址
            on_off = true; //插入結構的開關，防止ajax錯誤性屢次加載數據

        return {
            fillData: function (callback) {
                var _that = this;
                on_off = false;
                /* ajax
                --------------------*/
                // $.get(url,{ page:page,count:30 },function(json){
                //     if(json.status==1){
                //         _that.appendHTML(json.data);
                //         on_off = true;
                //         page++;
                //     }else{
                //         _that.loadedTips();
                //     }
                // },'json');

                /* 模擬測試-設置定時器模擬ajax請求數據
                -----------------------*/
                setTimeout(function () {
                    // 模擬終止
                    if (page == 5) {
                        _that.loadedTips();
                        return;
                    }
                    _that.appendHTML(testJson.data);
                    on_off = true;
                    page++;
                }, 400);
            },
            appendHTML: function (data) {
                var len = data.length,
                    n = 0;
                for (; n < len; n++) {

                    /*每次都將數據加載到高度最小的LI中---最終實現全部li高度都大體至關*/
                    var minHeight = Math.min.apply(null, [$li.eq(0).height(), $li.eq(1).height(), $li.eq(2).height(), $li.eq(3).height(), $li.eq(4).height()]);
                    for (var j = 0; j < 5; j++) {
                        if (minHeight == $li.eq(j).height()) {
                            $li[j].innerHTML += '<a href="' + data[n].href + '" target="_blank"><img src="' + data[n].src + '" width="' + data[n].width + '" height="' + data[n].height + '" alt="' + data[n].name + '" /><span class="name">' + page * n + data[n].name + '</span></a>';
                            break;
                        }
                    }
                    /*依次均與的將數據分佈到每一列中---將會出現有的li高度會很大
                    var k = 0;
                    n > (row - 1) ? k = n % row : k = n;
                    $li[k].innerHTML += '<a href="' + data[n].href + '" target="_blank"><img src="' + data[n].src + '" width="' + data[n].width + '" height="' + data[n].height + '" alt="' + data[n].name + '" /><span class="name">' + data[n].name + '</span></a>';
                    */
                }
                this.getOTop();
            },
            getOTop: function () {
                oTop = Math.min.apply(null, [$li.eq(0).height(), $li.eq(1).height(), $li.eq(2).height()]) + $target.offset().top;
            },
            loadedTips: function () {  //數據加載完畢
                $('#loadTips').find('span').text('數據已加載完');
                setTimeout(function () {
                    $('#loadTips').css({ 'visibility': 'hidden' });
                }, 200);
                // 解綁事件
                $(window).unbind('scroll', $.proxy(this.scrollEvent, this));
            },
            scrollEvent: function () {//鼠標滾輪事件
                if ($(document).scrollTop() + $(window).height() > oTop && on_off) {
                    this.fillData();
                }
            },
            init: function () {//開始執行事件
                this.fillData();
                $(window).bind('scroll', $.proxy(this.scrollEvent, this));
            }
        }
    } ();
    wallPic.init();
</script>