主题
使用css3 column多列布局实现瀑布流效果
CSS3多列布局（Multi-column）
多列布局（Multi-column）
多列布局就是将文本内容设计成像报纸那样的多列布局。或者说在之前我们通过js或者JQuery才能实现的瀑布流，在CSS3中我们可以直接通过CSS就可以实现，虽然有兼容性上面的问题。。
兼容性
IE10+、FireFox16+、Chrome26+、Safari6.1+、Opera12.1
CSS3多列布局的属性
| 属性 | 说明 |
|---|---|
| column-count | 指定元素应该分为几列 |
| column-fill | 指定如何填充每个列 |
| column-gap | 指定列与列之间的间隙 |
| column-rule | 所有 column-rule-* 属性的简写形式 |
| column-rule-color | 指定列与列之间边框的颜色 |
| column-rule-style | 指定列与列之间边框的样式 |
| column-rule-width | 指定列与列之间边框的宽度 |
| column-span | 指定元素应该横跨多少列 |
| column-width | 指定列的宽度 |
| columns | column-width 与 column-count 属性的简写属性 |
columns 设置对象的列数个每列的宽度
设置或检索对象的列数和每列的宽度。
语法：
css
columns: <'column-width'> || <'columns-count'>;参数说明：
（1）第一个参数指每列的宽度
（2）第二个参数指列数。可写两个，也可写一个。
两个参数优先考虑列数（在放的下的情况下）。若是宽度不够（列数*设置的宽度>容器的宽度），将会自动减小一列，并自动加宽段落的宽度，使之达到容器的宽度。中间自动生成合适的间距。
column-width 设置列宽
语法：
css
columns-width：<length> | auto默认;: 用长度值来定义列宽，不允许负值;auto：根据列数自定分配宽度。
虽说设置了列宽，但还是会根据列数和容器宽度来自动分配宽度。
PS：每列中的空隙为14像素。
column-count 设置列数
设置或检索对象的列数。
语法：
css
column-count：<integer> | auto;参数说明：: 用整数值来定义列数，不允许负值;auto：根据列宽自定分配宽度。
column-gap 设置列之间的间隙
设置或检索对象的列与列之间的间隙。
语法：
css
column-gap：<length> | normal;参数说明：用长度值来定义列与列之间的间隙（不是字与字间的距离，而是段落和段落间的距离），不允许负值;normal：与字体大小相同。normal间隙取决于字体大小。和字体大小相等。
column-rule 设置列与列之间的边框
语法：
css
column-rule：<column-rule-width> || <column-rule-style> || <column-rule-color>参数说明
● column-rule-width 边框的厚度
● column-rule-style 边框的样式
● column-rule-color 边框的颜色
PS：特别注意，如果列与列之间的间隙 < 边框的宽度，这就会出现列盖在边框上的情况。
column-rule-width
设置或检索对象的列与列之间的边框厚度。
语法：
css
column-rule-width：<length> | thin | medium | thick;参数说明
● length：用长度值来定义边框的厚度，不允许负值;
● medium：定义默认厚度的边框;
● thin：定义比默认厚度细的边框;
● thick：定义比默认厚度粗的边框。
column-rule-style 设置边框的样式
设置或检索对象的列与列之间的边框样式。
语法
css
column-rule-style：none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;参数说明
● none：无轮廓;
● hidden：隐藏边框;
● dotted：点状轮廓;
● dashed：虚线轮廓;
● solid：实线轮廓;
● double：双线轮廓;
● groove：3D凹槽轮廓;
● ridge：3D凸槽轮廓;
● inset：3D凹边轮廓;
● outset：3D凸边轮廓。
注意：如果是有两条线的轮廓，width将会是包括了两条线的距离。
column-rule-color 设置边框颜色
设置或检索对象的列与列之间的边框颜色。
语法：
css
column-rule-color：<color>;参数说明：指定颜色。没有宽度没有样式，颜色将会失效。默认黑色。
column-span 设置元素跨所有列
设置或检索对象元素是否横跨所有列。
语法：
css
column-span：none | all;参数说明：none：不跨列;all：横跨所有列。
不是像其他column属性用在容器当中，而是用在容器里的子元素当中。
column-fill 设置列与列的高度统一（目前主流浏览器都不兼容）
设置或检索对象所有列的高度是否统一。
语法：
css
column-fill: auto默认 | balance;参数说明：auto：列高度自适应内容;balance：所有列的高度以其中最高的一列统一。
主流浏览器都不兼容此属性。
column-break 设置换行
● column-break-before 设置指定对象前是否换行。
● column-break-after 设置指定对象后是否换行。
● column-break-inside 设置对象内部是否换行
column-break-before
设置或检索对象之前是否断行。
语法：
css
column-break-before：auto | always | avoid;参数说明：auto：既不强迫也不禁止在元素之前断行并产生新列;always：总是在元素之前断行并产生新列;avoid：避免在元素之前断行并产生新列。
column-break-after
设置或检索对象之后是否断行。
语法：
css
column-break-after：auto | always | avoid;参数说明：auto：既不强迫也不禁止在元素之后断行并产生新列;always：总是在元素之后断行并产生新列;avoid：避免在元素之后断行并产生新列。
column-break-inside属性
设置或检索对象内部是否断行。
语法：
css
column-break-inside：auto默认 | avoid示例代码
vue
<template>
<div class="masonry-container">
<div class="masonry-brick" v-for="(item, index) in items" :key="index">
<div class="content">
<img :src="item.img" alt=""/>
{{ item.text }}
</div>
</div>
</div>
</template>
<script>
export default {
name: '瀑布流',
data() {
return {
items: [
{ text: 'Item 1', img: 'https://www.hezhiwenda.info/vite/assets/9abea6958c4044d49a27dd627d2eade6.jpg' },
{ text: 'Item 2', img: 'https://www.hezhiwenda.info/vite/assets/2024-02-24%20130848.m10r45IQ.jpg' },
{ text: 'Item 3', img: 'https://www.hezhiwenda.info/vite/assets/2024-02-24%20131143.DRM0MOWY.jpg' },
{ text: 'Item 4', img: 'https://www.hezhiwenda.info/vite/assets/2024-02-24%20131628.DMfPZkgc.jpg' },
{ text: 'Item 5', img: 'https://www.hezhiwenda.info/vite/assets/2024-02-24%20134053.DDQCnaPT.jpg' },
// ... 更多items
]
};
}
};
</script>
<style scoped>
.masonry-container {
column-count: 3; /* 根据需要调整列数 */
column-gap: 6px; /* 列与列之间的间隙 */
width: 100%; /* 容器宽度 */
}
.masonry-container .content {
break-inside: avoid; /* 防止元素被分割到不同列 */
margin: 0 0 6px; /* 元素之间的垂直间隙 */
}
.masonry-container .content img {
width: 100%; /* 图片宽度自适应容器宽度 */
height: auto; /* 图片高度自适应 */
}
</style>