<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0;padding: 0;} img{max- 100%;} .container{max- 1200px;margin: 0 auto;} .waterfall{position: relative;} .waterfall .item{position: absolute;} </style> </head> <body> <div class="container"> <div class="waterfall"> <div class="item"> <img src="img/1.jpg" alt=""> </div> <div class="item"> <img src="img/2.jpg" alt=""> </div> <div class="item"> <img src="img/1.jpg" alt=""> </div> <div class="item"> <img src="img/2.jpg" alt=""> </div> <div class="item"> <img src="img/1.jpg" alt=""> </div> <div class="item"> <img src="img/2.jpg" alt=""> </div> <div class="item"> <img src="img/2.jpg" alt=""> </div> <div class="item"> <img src="img/1.jpg" alt=""> </div> </div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <script> $.fn.waterfall = function(){ let _this = $(this), _child = _this.children(), col = 3,/*列数*/ offset = 10,/*间隔*/ heightArr = [];/*存放每一列的高度*/ /*设置宽度*/ width = (_this.innerWidth()-offset*(col-1))/col; _child.width(width); /*存放最前面3个元素的高度*/ for(let i = 0;i<col;i++){ heightArr.push(_child.eq(i).innerHeight()); } var minH = 0;/*最低高度*/ for(let i=0;i<_child.length;i++){ let minIndex = 0; if(i<col){ minH = 0 ; minIndex = i; }else{ minH = heightArr[0]; for(let j = 0;j<heightArr.length;j++){ if(heightArr[j]<=minH){ minH = heightArr[j]; minIndex = j; } } minH+=offset; heightArr[minIndex] = minH+_child.eq(i).innerHeight(); } _child.eq(i).css({ top:minH, left:width*minIndex+offset*minIndex }); } /*设置父容器高度*/ _this.height(minH+_this.children(":last-child").innerHeight()); }; window.onload = function(){ $('.waterfall').waterfall(); } </script> </body> </html>