瀑布流布局
瀑布流，又称瀑布流式布局，专业名称：Masonry Layouts。
"Multi-column" 是一个英文术语，通常用于描述一种布局方式，其中内容被分成多个垂直列，而不是传统的单列布局。这种布局方式在网页设计、杂志排版和书籍设计中非常常见，可以有效地利用页面空间，提高内容的可读性和美观性。
如上图所示：页面展示的长短不一的多栏布局。
实现方式：## multi-column多栏布局实现瀑布流
环境搭建：
- 前端使用框架：vue
- vite搭建
multi-column 多栏布局是CSS3新增布局中的一种，尽管它很低调。
在网页设计中，multi-column布局通常使用CSS的column-count属性来实现。通过设置column-count的值，可以指定页面应该被分成多少列。
.content{
column-count: 5; // 设置共有几列 数字为几页面展示几列
column-gap: 10px; // 设置列与列之间的间距
column-width: 30px; // 设置每列宽度，列数由总宽度与每列宽度计算得出
.item{
break-inside: avoid; // 避免元素在列中换行
}
}
页面代码展示：
<template>
<div class="content">
<div class="item" :key="i.id" v-for="i in data">
<img :src="i.img">
<span class="title">{{i.value}}</span>
</div>
</div>
</template>
<script>
import data from "./data.json";
export default {
data() {
return {
data
};
}
};
</script>
<style lang="scss" scoped>
.content {
// column-width: 30px; // 设置每列宽度，列数由总宽度与每列宽度计算得出
column-count: 5; // 设置共有几列
column-gap: 10px; // 设置列与列之间的间距
padding: 10px;
.item {
break-inside: avoid; // 避免元素在列中换行
border: 1px solid #999;
margin-bottom: 10px;
img {
width: 100%;
vertical-align: middle;
}
.title {
display: block;
margin-left: 5px;
}
}
}
</style>
