1.一排能放置几张图片
2.将第一排的高度放置在一个数组中
3.从高度最小的地方开发放置图片
4.重置数组中的最小高度

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

2.封装的base.js

  1. function onReachBottom() {
  2.     /* 滚动条管理顶部的距离 */
  3.     var dh=$(document).height();
  4.     var sh=$(window).scrollTop();
  5.     var wh=$(window).height();
  6.     return(Math.ceil(sh+wh)==dh)?true:false;
  7. }