欢迎大家一起交流学习n(*≧▽≦*)n

效果：

html

<div>
    <div class="top">
    </div>
    <div id="loading">
    </div>
</div>

css

        .top {
            width: 600px;
            height: 600px;
            overflow: auto;
        }

        .row {
            width: 100%;
            height: 200px;
            background-color: pink;
            margin-bottom: 10px;
        }

        #loading {
            display: flex;
            align-items: center;
            margin-left: 180px;
            margin-top: 20px;
        }

        .loadAnimation {
            width: 4px;
            height: 10px;
            background-color: #68b2ce;
            animation: change linear 0.6s infinite;
            margin-right: 4px;
        }

        .loadAnimation:nth-child(1) {
            animation-delay: 0s;
        }

        .loadAnimation:nth-child(2) {
            animation-delay: 0.1s;
        }

        .loadAnimation:nth-child(3) {
            animation-delay: 0.2s;
        }

        .loadAnimation:nth-child(4) {
            animation-delay: 0.3s;
        }

        .loadAnimation:nth-child(5) {
            animation-delay: 0.4s;
        }

        .loadAnimation:nth-child(6) {
            animation-delay: 0.5s;
        }

        @keyframes change {
            0%, 60%, 100% {
                transform: scale(1);
            }
            30% {
                transform: scaleY(2);
            }
        }

js

    let data = [
        {
            name: "1"
        },
        {
            name: "2"
        },
        {
            name: "3"
        },
        {
            name: "4"
        },
        {
            name: "5"
        },
        {
            name: "6"
        },
        {
            name: "7"
        },
        {
            name: "8"
        },
        {
            name: "9"
        },
        {
            name: "10"
        }
    ];
    let array = [];
    let pageSize = 4;
    let curPage = 1;
    $(function () {
        getData(pageSize, curPage)
        createTableBody();
    })
    $(".top").scroll(function () {
        let nScrollHei = $(this)[0].scrollHeight; //滚动距离总长
        let nScrollTop = $(this)[0].scrollTop;   //滚动到的当前位置
        let tableBodyHei = $(".top").height();
        if (nScrollTop + tableBodyHei >= nScrollHei) {
            console.log("111");
            curPage++;
            getData(pageSize, curPage);
            $("#loading").append('<div class="loadAnimation"></div>\n' +
                '        <div class="loadAnimation"></div>\n' +
                '        <div class="loadAnimation"></div>\n' +
                '        <div class="loadAnimation"></div>\n' +
                '        <div class="loadAnimation"></div>\n' +
                '        <div class="loadAnimation"></div>');
            setTimeout(function () {
                createTableBody();
                $("#loading").empty();
            }, 1000)
        }
    });

    function createTableBody() {
        for(let i=0;i<array.length;i++) {
            $(".top").append('<div class="row">'+array[i].name+'</div>');
        }
    }

    function getData(pageSize, curPage) {
        array = [];
        let start = pageSize * (curPage-1);
        let end = pageSize * curPage;
        let index = 0;
        if (end > data.length) {
            end = data.length
        }
        for (let i = start; i < end; i++) {
            array[index] = data[i];
            index++;
        }
        console.log(array)
    }