上效果
知识理解
column-count: 4; column-gap: 15px;实现固定四行瀑布流布局
columns: 200px auto;column-gap: 15px;由浏览器根据容器的宽度自动调整，尽可能一行多个200px宽度的列数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布流布局示例</title>
<style>
.container {
/* 设置列间距 */
column-gap: 15px;
/* column-count: 4; 固定列数 */
/* 设置列宽和列数（列的数量由浏览器根据容器的宽度自动调整） */
/* 设置列数 */
columns: 300px auto;
/* 禁用文本选择 */
user-select: none;
}
.item {
/* break-inside 用于控制元素是否可以在页面、列或区域的边界处被分割 */
/* 当设置为 avoid 时，浏览器会尝试避免将元素的内容分割到不同的页面、列或区域中。这意味着整个元素内容尽可能保持在同一页面、列或区域内 */
break-inside: avoid;
/* Safari 浏览器 */
-webkit-column-break-inside: avoid;
/*老版本浏览器 用于控制元素是否可以在页面、列或区域的边界处被分割*/
page-break-inside: avoid;
margin-bottom: 15px;
}
.item img {
width: 100%;
border-radius: 8px;
display: block;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="item" v-for="(item, index) in list" :key="index">
<img :src="`https://picsum.photos/${item}`" alt="随机图片">
</div>
</div>
</div>
<!-- 引入Vue库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app=new Vue({
el: '#app',
data () {
return {
list: [
"290/320",
"190/370",
"290/330",
"250/410",
"230/380",
"260/370",
"210/430",
"290/310",
"430/310",
"390/440",
"430/310",
"390/440",
"390/440",
]
};
}
});
</script>
</body>
</html>
