第一种方式：使用CSS和JavaScript来实现
<div class="waterfall-container"> <!-- 第一列 --> <div class="waterfall-column"> <div class="waterfall-item"> <!-- 第一列第一个内容 --> <div class="waterfall_item_box"></div> </div> <div class="waterfall-item"> <!-- 第一列第二个内容 --> <div class="waterfall_item_box"></div> </div> <!-- ... --> </div> <!-- 第二列 --> <div class="waterfall-column"> <div class="waterfall-item"> <!-- 第二列第一个内容 --> <div class="waterfall_item_box"></div> </div> <div class="waterfall-item"> <!-- 第二列第二个内容 --> <div class="waterfall_item_box"></div> </div> <!-- ... --> </div> </div> <style> .waterfall-container { display: flex; justify-content: space-between; } .waterfall-column { flex: 1; } .waterfall-item { margin-bottom: 20px; background-color: #f2f2f2; border-radius: 5px; padding: 10px; } </style> <script> window.addEventListener('load', function() { // 获取所有的瀑布流列 const columns = document.querySelectorAll('.waterfall-column'); // 遍历每个瀑布流列 columns.forEach(column => { // 获取当前列的所有项 const items = column.querySelectorAll('.waterfall-item'); // 遍历每个瀑布流项，设置自适应高度 items.forEach(item => { // 获取项的内容高度 const contentHeight = item.querySelector('.waterfall_item_box').offsetHeight; // 设置项的高度为内容高度 item.style.height = contentHeight + 'px'; // item.style.height = '200px'; // 固定高度 // item.style.height = Math.floor(Math.random() * 200 + 100) + 'px'; // 随机高度 }); }); }); </script>
第二种方式：
注意要引入jQuery库。
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="html/js/jquery.min.js"></script> //引入jq库 <style> .waterfall{ position: relative; margin: 0 auto; } .column{ position: absolute; width: 200px; margin: 4px; border: 1px solid #ddd; transition: all 1s; } .column img{ width: 100%; height: 100%; display: block; } </style> </head> <body> <div class="waterfall"> <div class="column"> <img src="https://img2.baidu.com/it/u=3853345508,384760633&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1200" alt="Image 1"> </div> <div class="column"> <img src="https://img1.baidu.com/it/u=1458656822,2078909008&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=750" alt="Image 2"> </div> <div class="column"> <img src="https://img.zhisheji.com/bbs/forum/201401/05/153945tbr7pg5torfzptso.jpg" alt="Image 2"> </div> <div class="column"> <img src="https://img1.baidu.com/it/u=1458656822,2078909008&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=750" alt="Image 2"> </div> ... </div> </body> <script> $(function(){ init(); $(window).on('resize',function(){//重新加载 init(); }); }) function init(){ var boxWidth=$(".column").outerWidth(true); // 获取每个小盒子的宽度 包括margin、padding、border var cols=parseInt($(window).width()/boxWidth); // 获取列数 var heightArr=[]; for(var i=0;i<cols;i++){ heightArr.push(0); }; //遍历每一张图片 $(".column").each(function(index,column) { var idx=0; var minBoxHeight=heightArr[0]; // 获取最小高度 for(var i=0;i<heightArr.length;i++){ if(heightArr[i]<minBoxHeight){ minBoxHeight=heightArr[i]; idx=i; // 获取最小高度的索引 } }; // 设置图片的样式 $(column).css({ left:boxWidth*idx, top:minBoxHeight }); heightArr[idx]+=$(column).outerHeight(true); }); }; </script> </html>
