第一种方式：使用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>
