vue3 - 【完整源码】实现网页整屏大量图片、div 容器的自适应瀑布流布局,宽高度不

自适应瀑布流布局是指在网页中展示大量图片和div容器，并且根据容器的宽高度自动调整布局。在Vue3中实现这样的布局，可以使用以下步骤：

首先，安装Vue3并创建Vue实例。

npm install vue@next

在Vue中创建动态组件，并为每个组件设置一个宽高。

<template>
  <div>
    <component v-for="(item, index) in items" :key="index" :is="item.type" :style="{ width: item.width + 'px', height: item.height + 'px' }"></component>
  </div>
</template>

<script>
import ImageComponent from './components/ImageComponent.vue'
import DivComponent from './components/DivComponent.vue'

export default {
  data() {
    return {
      items: [
        {
          type: 'image',
          width: 200,
          height: 300,
        },
        {
          type: 'div',
          width: 250,
          height: 150,
        },
        // 添加更多的图片和div容器
      ],
    }
  },
  components: {
    ImageComponent,
    DivComponent,
  },
}
</script>

在组件中，可以使用CSS的flex布局来实现自适应瀑布流布局。

<template>
  <div class="container">
    <!-- 图片组件的模板 -->
  </div>
</template>

<style scoped>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>

通过以上步骤，我们可以实现一个简单的自适应瀑布流布局。当有新的图片或div容器加入时，布局会自动调整以适应屏幕宽度和高度。不同宽度和高度的元素会按照一定的规则排列，形成一个美观的瀑布流效果。

以上是一个简单的示例，实际情况下，你可以根据具体的需求进行更多的定制和优化。