用css实现瀑布流结构

饭宝 · 2025-1-4 22:00:44

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

上效果

知识理解

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>
<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>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

用css实现瀑布流结构

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块