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.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    9.     <script src="lib/base.js"></script>
    10.     <title>Document</title>
    11.     <style>
    12.         * {
    13.             margin: 0;
    14.             padding: 0
    15.         }
    17.         img {
    18.             width: 240px;
    19.         }
    21.         .item {
    22.             border: 1px solid rgb(131, 130, 130);
    23.             padding: 20px;
    24.             float: left;
    25.         }
    26.     </style>
    27. </head>
    29. <body>
    30.     <div class="content">
    31.         <div class="item">
    32.             <img src="images/01.jpg" alt="">
    33.         </div>
    34.         <div class="item">
    35.             <img src="images/02.jpg" alt="">
    36.         </div>
    37.         <div class="item">
    38.             <img src="images/03.jpg" alt="">
    39.         </div>
    40.         <div class="item">
    41.             <img src="images/04.jpg" alt="">
    42.         </div>
    43.         <div class="item">
    44.             <img src="images/05.jpg" alt="">
    45.         </div>
    46.         <div class="item">
    47.             <img src="images/06.jpg" alt="">
    48.         </div>
    49.         <div class="item">
    50.             <img src="images/07.jpg" alt="">
    51.         </div>
    52.         <div class="item">
    53.             <img src="images/08.jpg" alt="">
    54.         </div>
    55.         <div class="item">
    56.             <img src="images/09.jpg" alt="">
    57.         </div>
    58.         <div class="item">
    59.             <img src="images/10.jpg" alt="">
    60.         </div>
    61.         <div class="item">
    62.             <img src="images/11.jpg" alt="">
    63.         </div>
    64.         <div class="item">
    65.             <img src="images/12.jpg" alt="">
    66.         </div>
    67.     </div>
    68.     <script>
    69.         /* 假设是从服务器取得的数据 */
    70.         var url = {
    71.             dataUrl: [{
    72.                 src: "01.jpg"
    73.             }, {
    74.                 src: "02.jpg"
    75.             }, {
    76.                 src: "03.jpg"
    77.             }, {
    78.                 src: "04.jpg"
    79.             }, {
    80.                 src: "05.jpg"
    81.             }, {
    82.                 src: "06.jpg"
    83.             }, {
    84.                 src: "07.jpg"
    85.             }, {
    86.                 src: "08.jpg"
    87.             }, {
    88.                 src: "09.jpg"
    89.             }, {
    90.                 src: "10.jpg"
    91.             }, {
    92.                 src: "11.jpg"
    93.             }, {
    94.                 src: "12.jpg"
    95.             }]
    96.         }
    97.         /* 1.一排能放置几张图片 */
    98.         window.onload = function () {
    99.             place_img();
    100.                     url.dataUrl.forEach(item => {
    101.                         let list = `<div class="item"><img  src="images/${item.src}"/></div>`
    102.                         $(".content").append(list);
    103.                         place_img()
    104.                     })
    105.                 }
    108.         function place_img() {
    109.             var ww = $(window).width()
    110.             var itemWidth = $(".item").outerWidth();
    111.             var num = Math.floor(ww / itemWidth);
    112.             /* 2.将第一排的高度放置在一个数组中 */
    113.             var arrHeight = []
    114.             $(".item").each((index, item) => {
    115.                 if (index < num) {
    116.                     var itemHeight = $(item).outerHeight();
    117.                     arrHeight.push(itemHeight)
    118.                 } else {
    119.                     /* 3.从高度最小的地方开发放置图片 */
    120.                     var minHeight = Math.min(...arrHeight);
    121.                     var minIndex = arrHeight.indexOf(minHeight);
    122.                     var offsetLeft = $(".item").eq(minIndex).offset().left;
    123.                     $(".item").eq(index).css({
    124.                         position: 'absolute',
    125.                         top: minHeight,
    126.                         left: offsetLeft
    127.                     })
    128.                     /* 4.重置数组中的最小高度 */
    129.                     arrHeight[minIndex] = minHeight + $(".item").eq(index).outerHeight();
    130.                 }
    131.             })
    133.         }
    134.     </script>
    135. </body>
    137. </html>