以下是一个基于Vue 3实现的响应式瀑布流列表布局的示例代码:
<template>
<div class="container">
<div class="column" v-for="(item, index) in columns" :key="index">
<div class="item" v-for="data in item" :key="data.id">
<!-- 根据数据类型渲染不同的内容 -->
<div v-if="data.type === 'image'" class="image">
<img :src="data.url" alt="Image">
</div>
<div v-if="data.type === 'video'" class="video">
<video controls>
<source :src="data.url" type="video/mp4">
</video>
</div>
<div v-if="data.type === 'text'" class="text">
<h3>{{ data.title }}</h3>
<p>{{ data.content }}</p>
</div>
</div>
</div>
</div>
</template>
<script>
import { reactive, ref, onMounted } from 'vue';
export default {
name: 'Waterfall',
setup() {
// 模拟数据
const dataList = [
{ id: 1, type: 'image', url: 'image1.jpg' },
{ id: 2, type: 'video', url: 'video1.mp4' },
{ id: 3, type: 'text', title: 'Title 1', content: 'Content 1' },
{ id: 4, type: 'image', url: 'image2.jpg' },
{ id: 5, type: 'video', url: 'video2.mp4' },
{ id: 6, type: 'text', title: 'Title 2', content: 'Content 2' },
// 添加更多数据...
];
// 列数
const columnCount = ref(3);
// 列表数据
const columns = reactive([]);
// 动态计算列数
const calculateColumns = () => {
const containerWidth = document.querySelector('.container').clientWidth;
const columnWidth = 300; // 每列宽度
columnCount.value = Math.floor(containerWidth / columnWidth);
};
// 分配数据到列
const distributeData = () => {
columns.value = Array.from({ length: columnCount.value }, () => []);
dataList.forEach((data, index) => {
const columnIndex = index % columnCount.value;
columns.value[columnIndex].push(data);
});
};
// 监听窗口大小变化
const handleResize = () => {
calculateColumns();
distributeData();
};
onMounted(() => {
calculateColumns();
distributeData();
window.addEventListener('resize', handleResize);
});
return {
columns
};
}
};
</script>
<style scoped>
.container {
display: flex;
flex-wrap: wrap;
margin: -10px; /* 调整列之间的间隔 */
}
.column {
flex: 1;
padding: 10px;
box-sizing: border-box;
}
.item {
margin-bottom: 10px;
}
.image img {
width: 100%;
}
.video {
position: relative;
padding-bottom: 56.25%; /* 按照视频宽高比设置占位高度 */
overflow: hidden;
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.text h3 {
font-size: 18px;
margin-bottom: 5px;
}
.text p {
font-size: 14px;
margin-bottom: 0;
}
</style>
以上代码使用了Vue 3的Composition API编写,通过reactive
创建响应式数据对象,并使用ref
创建响应式计算属性。使用onMounted
钩子函数来监听组件挂载后的事件,计算列数并分配数据到列中。通过监听窗口大小变化事件,在窗口大小改变时重新计算列数和分配数据。
这是一个简单的示例,你可以根据你的实际需求进行修改和扩展。在模拟数据中,你可以添加更多的数据项,根据数据类型渲染不同的内容。在样式中,你可以根据你想要的效果调整布局和样式。