vue3 - 详细实现视频/图片/图文“响应式瀑布流“列表布局示例代码，手机移动端H5或PC端电脑网页根据屏幕宽度自适应响应式瀑布流效果，支持数据列表动态懒加载

以下是一个基于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钩子函数来监听组件挂载后的事件，计算列数并分配数据到列中。通过监听窗口大小变化事件，在窗口大小改变时重新计算列数和分配数据。

这是一个简单的示例，你可以根据你的实际需求进行修改和扩展。在模拟数据中，你可以添加更多的数据项，根据数据类型渲染不同的内容。在样式中，你可以根据你想要的效果调整布局和样式。