1. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    2.     <style>
    3.         *{margin: 0;padding: 0}
    4.         img{
    5.             width: 240px;
    6.         }
    7.         .item{
    8.             border: 1px solid #eee;
    9.             padding: 20px;
    10.             float: left;
    11.         }
    12.     </style>
    13. </head>
    14. <body>
    15.     <div class="content">
    16.         <div class="item">
    17.             <img src="images/01.jpg" alt="">
    18.         </div>
    19.         <div class="item">
    20.                 <img src="images/02.jpg" alt="">
    21.         </div>
    22.         <div class="item">
    23.                 <img src="images/03.jpg" alt="">
    24.         </div>
    25.         <div class="item">
    26.                 <img src="images/04.jpg" alt="">
    27.         </div>
    28.         <div class="item">
    29.                 <img src="images/05.jpg" alt="">
    30.         </div>
    31.         <div class="item">
    32.                 <img src="images/06.jpg" alt="">
    33.         </div>
    34.         <div class="item">
    35.                 <img src="images/07.jpg" alt="">
    36.         </div>
    37.         <div class="item">
    38.                 <img src="images/08.jpg" alt="">
    39.         </div>
    40.         <div class="item">
    41.                 <img src="images/09.jpg" alt="">
    42.         </div>
    43.         <div class="item">
    44.                 <img src="images/10.jpg" alt="">
    45.         </div>
    46.         <div class="item">
    47.                 <img src="images/11.jpg" alt="">
    48.         </div>
    49.         <div class="item">
    50.                 <img src="images/12.jpg" alt="">
    51.         </div>
    52.     </div>
    53.     <script>
    54.             /* 1.一排能放置几张图片 */
    55.         window.onload = function(){
    56.             var ww = $(window).width();
    57.             var itemWidth = $(".item").outerWidth();
    58.             var num =Math.floor(ww/itemWidth);
    59.             console.log(num)
    60.             /* 2.将第一排的高度添加到一个数组中 */
    61.             var heightArr =[];
    62.             $(".item").each((index,item)=>{
    63.                     if(index<num){
    64.                         var item = $(item).outerHeight()
    65.                         heightArr.push(item)
    66.                     }else{
    67.                         /* 3.从数组高度最小的地方添加图片 */
    68.                         var minHeight = Math.min(...heightArr);
    69.                         var minIndex = heightArr.indexOf(minHeight);
    70.                         var offsetLeft = $(".item").eq(minIndex).offset().left;
    71.                         $(".item").eq(index).css({position:'absolute',top:minHeight,left:offsetLeft});
    72.                         /* 4.重新设置数组的最小高度 */
    73.                         var height = $(".item").eq(index).outerHeight();
    74.                         heightArr[minIndex] = minHeight+height;
    76.                     }
    77.             })
    78.             console.log(heightArr)
    79.         }
    80.     </script>