实现瀑布流布局
2023-03-08 本文已影响0人
靴唯白
需求
- 图片不变形
- 展示的区域不能留白（全屏）
- 一般出现在移动端 H5 页面底部
- 主要以图片或视频为主
- 降低页面复杂度，节省空间，可以容纳更多内容
- 不规则展示，不会那么枯燥，用户体验好
1. Jquery 实现思路分析
图片等宽不等高
图片的定位：
position:absolute;
left: 高度最小的图片的索引值 * 图片的宽度;
top: 最小的图片的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.item {
float: left;
padding: 10px;
}
.item img {
width: 460px;
}
</style>
</head>
<body>
<div class="box">
<div class="item">
<img
src="https://images.unsplash.com/photo-1661956602944-249bcd04b63f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw2fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60"
alt=""
/>
</div>
<div class="item">
<img
src="https://images.unsplash.com/photo-1678005217231-1ea717fb2429?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60"
alt=""
/>
</div>
<div class="item">
<img
src="https://images.unsplash.com/photo-1678005216513-6f6036562409?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60"
alt=""
/>
</div>
<div class="item">
<img
src="https://images.unsplash.com/photo-1670272505391-8efda8e7a99c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60"
alt=""
/>
</div>
<div class="item">
<img
src="https://images.unsplash.com/photo-1677577434912-84a130e6f555?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60"
alt=""
/>
</div>
<div class="item">
<img
src="https://images.unsplash.com/photo-1661956602944-249bcd04b63f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw2fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60"
alt=""
/>
</div>
<div class="item">
<img
src="https://images.unsplash.com/photo-1678005217231-1ea717fb2429?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60"
alt=""
/>
</div>
</div>
</body>
</html>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
// 一定要等页面加载完成后再去处理（否则图片高度获取不出来导致图片堆叠，造成页面bug）
$(window).on('load' ,function () {
waterFall();
});
function waterFall() {
// 求出列数
let box = $(".item"); // 所有的图片盒子
let boxWidth = box.outerWidth(); // 当前每张图片的盒子的宽度
let screenWidth = $(window).width(); // 屏幕宽度
let cols = Math.floor(screenWidth / boxWidth); // 一排有几个，也就是几列
// 创建数组
let heightArr = [];
// 图片遍历循环，除第一排不需要定位，取高度值，其他排要定位处理
$.each(box, function (index, item) {
// 取出图片对应的高度
let boxHeight = $(item).outerHeight();
// 如果 index < cols 则代表是第一行，需要将它们的高度值存放到数组里面，反之
if (index < cols) {
heightArr[index] = boxHeight;
} else {
// 最小的图片的高度
let minBoxHeight = Math.min(...heightArr);
// 高度最小的图片的索引值
let mingBoxIndex = $.inArray(minBoxHeight, heightArr);
$(item).css({
position: "absolute",
left: mingBoxIndex * boxWidth + "px",
top: minBoxHeight + "px",
});
// 高度追加
heightArr[mingBoxIndex] += boxHeight;
}
});
}
</script>
2.纯CSS column 多行布局实现瀑布流
column 实现瀑布流主要依赖两个属性。
一个是 column-count 属性，是分为多少列。
一个是 column-gap 属性，是设置列与列之间的距离。
<style>
.box {
margin: 10px;
column-count: 3;
column-gap: 10px;
}
.item {
margin-bottom: 10px;
}
.item img{
width: 100%;
height:100%;
}
</style>
<body>
<div class="box">
<div class="item">
<img src="1.jpg" alt="" />
</div>
<div class="item">
<img src="2.jpg" alt="" />
</div>
</div>
</body>
3.纯 CSS flex 弹性布局实现瀑布流
flex 实现瀑布流需要将最外层元素设置为 display: flex，即横向排列。然后通过设置 flex-flow:column wrap 使其换行。设置 height: 100vh 填充屏幕的高度，来容纳子元素。每一列的宽度可用 calc 函数来设置，即 width: calc(100%/3 - 20px)。分成等宽的 3 列减掉左右两遍的 margin 距离。
<style>
.box {
display: flex;
flex-flow:column wrap;
height: 100vh;
}
.item {
margin: 10px;
width: calc(100%/3 - 20px);
}
.item img{
width: 100%;
height:100%;
}
</style>
<body>
<div class="box">
<div class="item">
<img src="1.jpg" alt="" />
</div>
<div class="item">
<img src="2.jpg" alt="" />
</div>
</div>
</body>
