1. http://localhost:8000/more
    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.     <style>
    10.         .item {
    11.             float: left;
    12.             border: 1px solid #eee;
    13.         }
    15.         .item img {
    16.             width: 240px;
    17.             vertical-align: bottom;
    18.             padding: 5px;
    19.         }
    20.     </style>
    21. </head>
    23. <body>
    24.     <div id="app">
    26.     </div>
    27.     <script>
    28.         http();
    29.         $(window).scroll(function(){
    30.            if(isReachBottom()){
    31.               http();
    32.            }
    33.         })
    34.         function http() {
    35.             var url = "http://localhost:8000/more"
    36.             $.ajax({
    37.                 url,
    38.                 success: res => {
    39.                     res.forEach(item => {
    40.                         var template = `
    41.                         <div class ="item">
    42.                           <img src = ${item.imageUrl}
    43.                         </div>  
    44.                     `
    45.                         $("#app").append(template)
    46.                     })
    47.                     setTimeout(sortBox, 100)
    48.                 }
    49.             })
    50.         }
    51.         function sortBox() {
    52.             /* 1.获取一排能放几个盒子 */
    53.             var ww = $(window).width();
    54.             var box = $(".item").width();
    55.             var num = Math.floor(ww / box);
    56.             var arr = [];
    57.             /* 2.将第一排的高度放到一个数组中 */
    58.             $(".item").each((index, item) => {
    59.                 if (index < num) {
    60.                     var height = $(item).outerHeight();
    61.                     arr.push(height)
    62.                 } else {
    63.                     /* 3.从最小高度的地方添加图片 */
    64.                     var minHeight = Math.min(...arr);
    65.                     var index = arr.indexOf(minHeight);
    66.                     var offsetLeft = $(".item").eq(index).offset().left;
    67.                     $(item).css({position:"absolute",top:minHeight,left:offsetLeft});
    68.                     arr[index] = minHeight + $(item).outerHeight();
    69.                 }
    70.             })
    71.         }
    73.         function isReachBottom(){
    74.             var scrollTop = $(window).scrollTop();
    75.             var availHeight = $(window).height();
    76.             var dh = $(document).height();
    77.             return (scrollTop+availHeight>dh-200)?true:false;
    78.         }
    79.     </script>
    80. </body>
    82. </html>