1. 接口地址: http://localhost:3000/top/playlist/?cat=华语&limit=20&offset=${offset}
    1. function http({
    2.     offset=0,
    3.     success
    4. }){
    5.     var url =`http://localhost:3000/top/playlist?cat=华语&limit=20&offset=${offset}`
    6.     $.ajax({
    7.         url,
    8.         success:res=>{
    9.             success(res)
    10.         }
    11.     })
    12. }
    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    9.     <script src="lib/http.js"></script>
    10.     <style>
    11.         .item img {
    12.             width: 150px;
    13.             height: 150px;
    14.             padding: 5px;
    15.         }
    17.         .item {
    18.             border: 1px solid #eee;
    19.             float: left;
    20.             margin-right: 80px;
    21.             margin-top: 50px;
    22.         } 
    23.     </style>
    24. </head>
    26. <body>
    27.     <div id="app">
    29.     </div>
    30.     <script>
    31.         /* 第一http请求 */
    32.         loadData();
    33.         jump();
    34.         $(window).scroll(function(){
    35.             if(isReachBottom()){
    36.                 var offset = $(".item").length;
    37.                 loadData(offset)
    38.             }
    39.         })
    40.        function jump(){
    41.            setTimeout(()=>{
    42.                $(".item").click(function(event){
    43.                    let aid = event.currentTarget.dataset.aid;
    44.                    location.href = `datail.html?id=${aid}`
    45.                })
    46.            },200)                                              
    47.        }
    48.         function isReachBottom() {
    49.             var scrollTop = $(window).scrollTop();
    50.             var availHeight = $(window).height();
    51.             var dh = $(document).height();
    52.             console.log(scrollTop + availHeight)
    53.             return (scrollTop + availHeight == dh) ? true : false;
    54.         }
    55.         function loadData(offset){
    56.                 http({
    57.                     offset,
    58.                     success: res => {
    59.                         var playlists = res.playlists;
    60.                         playlists.forEach(item => {
    61.                             var template = `
    62.                          <div class="item" data-aid=${item.id}>
    63.                             <img src=${item.coverImgUrl}>
    64.                          </div>   
    65.                       `
    66.                             $("#app").append(template)
    67.                         })
    68.                     }
    69.                 })
    70.             }
    74.     </script>
    75. </body>
    77. </html>