vue瀑布流布局

已于 2024-05-09 15:42:02 修改
阅读量2k 收藏 12
点赞数 2
文章标签： vue.js javascript 前端
于 2023-05-25 16:25:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49295874/article/details/125478061
版权

'瀑布流’是前端的一种’布局’方式，就像我们经常’搜百度’看到的’图片列表’都是’瀑布流’完成的，如下图，
‘瀑布流’会根据’某一列’的’高度’，来自动向’最低高度’的一’列’下面继续添加元素，下面是在’vue’项目中
使用’瀑布流’的案例。
在这里插入图片描述

vue2
<template>
    <div class="box">
        <div class="col" ref="col1">
            <transition-group name="list">
                <div class="item" v-for="item in dataList1" :key="item.id">
                    {{item.text}}
                    <img :src="item.url" />
                </div>
            </transition-group>
        </div>
        <div class="col" ref="col2">
            <transition-group name="list">
                <div class="item" v-for="item in dataList2" :key="item.id">
                    {{item.text}}
                    <img :src="item.url" />
                </div>
            </transition-group>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
            mainMenuList: [
                {
                    id: 1,
                    text: '我是1',
                    url: 'https://img.zcool.cn/community/01162e5d903ad6a8012060bee46bf3.jpg@1280w_1l_2o_100sh.jpg'
                },
                {
                    id: 2,
                    text: '我是2',
                    url: 'https://img.zcool.cn/community/0121a55d903ad6a801211d53066683.jpg@1280w_1l_2o_100sh.jpg'
                },
                {
                    id: 3,
                    text: '我是3',
                    url: 'http://pic39.nipic.com/20140321/18063302_210604412116_2.jpg'
                },
                {
                    id: 4,
                    text: '我是4',
                    url: 'https://img.zcool.cn/community/0121a55d903ad6a801211d53066683.jpg@1280w_1l_2o_100sh.jpg'
                },     
                {
                    id: 5,
                    text: '我是5',
                    url: 'http://pic39.nipic.com/20140321/18063302_210604412116_2.jpg'
                },     
                {
                    id: 6,
                    text: '我是6',
                    url: 'http://pic39.nipic.com/20140321/18063302_210604412116_2.jpg'
                },
                {
                    id: 7,
                    text: '我是7',
                    url: 'https://img.zcool.cn/community/0121a55d903ad6a801211d53066683.jpg@1280w_1l_2o_100sh.jpg'
                },                                                                           
            ],
            dataList1: [],
            dataList2: []
            }
        },
        mounted() {
            this.mountMenu()
        },
        methods: {
            mountMenu(arg) {
                var temp = this.mainMenuList
                var index = arg || 0
                var refName = this.selectCol()
                if (temp.length > index) {
                    this[refName].push(this.mainMenuList[index])
                    this.$nextTick(() => {
                        this.mountMenu(index + 1)
                    })
                }
            },
            selectCol() {
                var getHeight = (ref) => {
                    return this.$refs[ref].offsetHeight
                }
                var height1 = getHeight('col1')
                var height2 = getHeight('col2')

                switch (Math.min(height1, height2)) { // Math.min()方法返回参数中最小的值
                    case height1:
                    return 'dataList1'
                    case height2:
                    return 'dataList2'
                }
            }
        }
    }
</script>

<style scoped>
.box{
    overflow: hidden;
    width: 400px;
}
.col{
    float: left;
    width: 100px;
}
img{
    width: 100%;
}
</style>
vue3
<template>
  <div class="box">
    <div class="col" ref="col1">
      <div class="item" v-for="item in dataList1" :key="item.id">
        <img :src="item.url" loading="lazy" alt="" />
        {{ item.text }}
      </div>
    </div>
    <div class="col" ref="col2">
      <div class="item" v-for="item in dataList2" :key="item.id">
        <img :src="item.url" loading="lazy" alt="" />
        {{ item.text }}
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs, onMounted, ref, nextTick } from "vue";
export default defineComponent({
  name: "waterfall",
  setup() {
    const col1 = ref(null);
    const col2 = ref(null);
    const state = reactive({
      mainMenuList: [
        {
          id: 1,
          text: "我是1",
          url: "https://img.zcool.cn/community/01162e5d903ad6a8012060bee46bf3.jpg@1280w_1l_2o_100sh.jpg"
        },
        {
          id: 2,
          text: "我是2",
          url: "https://img.zcool.cn/community/0121a55d903ad6a801211d53066683.jpg@1280w_1l_2o_100sh.jpg"
        },
        {
          id: 3,
          text: "我是3",
          url: "http://pic39.nipic.com/20140321/18063302_210604412116_2.jpg"
        },
        {
          id: 4,
          text: "我是4",
          url: "https://img.zcool.cn/community/0121a55d903ad6a801211d53066683.jpg@1280w_1l_2o_100sh.jpg"
        },
        {
          id: 5,
          text: "我是5",
          url: "http://pic39.nipic.com/20140321/18063302_210604412116_2.jpg"
        },
        {
          id: 6,
          text: "我是6",
          url: "http://pic39.nipic.com/20140321/18063302_210604412116_2.jpg"
        },
        {
          id: 7,
          text: "我是7",
          url: "https://img.zcool.cn/community/0121a55d903ad6a801211d53066683.jpg@1280w_1l_2o_100sh.jpg"
        },
        {
          id: 8,
          text: "我是8",
          url: "https://img.zcool.cn/community/01162e5d903ad6a8012060bee46bf3.jpg@1280w_1l_2o_100sh.jpg"
        },
        {
          id: 9,
          text: "我是9",
          url: "https://img.zcool.cn/community/0121a55d903ad6a801211d53066683.jpg@1280w_1l_2o_100sh.jpg"
        },
        {
          id: 10,
          text: "我是10",
          url: "https://img0shdi28hu1.sunuping.com/upload/jpg/20230804095136/1687280090275311617.jpg"
        },
        {
          id: 11,
          text: "我是11",
          url: "https://img.zcool.cn/community/0121a55d903ad6a801211d53066683.jpg@1280w_1l_2o_100sh.jpg"
        },
        {
          id: 12,
          text: "我是12",
          url: "http://pic39.nipic.com/20140321/18063302_210604412116_2.jpg"
        },
        {
          id: 13,
          text: "我是13",
          url: "http://pic39.nipic.com/20140321/18063302_210604412116_2.jpg"
        },
        {
          id: 14,
          text: "我是14",
          url: "http://pic39.nipic.com/20140321/18063302_210604412116_2.jpg"
        }
      ],
      dataList1: [],
      dataList2: []
    });
    onMounted(() => {
      mountMenu();
    });
    const mountMenu = arg => {
      let temp = state.mainMenuList;
      let index = arg || 0;
      let refName = selectCol();
      if (temp.length > index) {
        state[refName].push(state.mainMenuList[index]);
        nextTick(() => {
          mountMenu(index + 1);
        });
      }
    };
    const selectCol = () => {
      let height1 = col1.value.offsetHeight;
      let height2 = col2.value.offsetHeight;
      switch (
        Math.min(height1, height2) // Math.min()方法返回参数中最小的值
      ) {
        case height1:
          return "dataList1";
        case height2:
          return "dataList2";
      }
    };
    return {
      ...toRefs(state),
      col1,
      col2
    };
  }
});
</script>
<style lang="less" scoped>
.box {
  width: 375px;
}
.col {
  float: left;
  width: 185px;
}
img {
  width: 100%;
  object-fit: contain;
}
.item {
  text-align: center;
  margin: 10px 0;
}
</style>

两行

<template>
  <div class="page-main">
    <div class="card">
      <div class="coloum1">
        <div class="card-item" v-for="(item, index) in cardList1" :key="index" :style="[{ background: item.color }, { height: item.height }, { lineHeight: item.height }]" :class="{ visibles: isVisibility }">
          <p class="text">{{ item.num }}</p>
        </div>
      </div>
      <div class="coloum2">
        <div class="card-item" v-for="(item, index) in cardList2" :key="index" :style="[{ background: item.color }, { height: item.height }, { lineHeight: item.height }]" :class="{ visibles: isVisibility }">
          <p class="text">{{ item.num }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick } from "vue";
const cardList = reactive([
  // 测试数据
  {
    num: "0",
    color: "#FCCF0A",
    height: "100px"
  },
  {
    num: "1",
    color: "#e53e26",
    height: "200px"
  },
  {
    num: "2",
    color: "green",
    height: "300px"
  },
  {
    num: "3",
    color: "red",
    height: "100px"
  },
  {
    num: "4",
    color: "#000",
    height: "200px"
  },
  {
    num: "5",
    color: "blue",
    height: "300px"
  },
  {
    num: "6",
    color: "#691ba3",
    height: "100px"
  },
  {
    num: "7",
    color: "orange",
    height: "400px"
  },
  {
    num: "8",
    color: "yellow",
    height: "500px"
  },
  {
    num: "9",
    color: "#409eff",
    height: "100px"
  }
]);

const isVisibility = ref(true);
// 由于渲染时候对数据的两次赋值，则会出现一次闪现，需要防抖

onMounted(() => {
  equallyCard();
  nextTick(() => {
    caLFlex();
  }).then(() => {
    isVisibility.value = true;
  });
});

const cardList1 = ref([]); // 各列的数据
const cardList2 = ref([]);

function equallyCard() {
  // 平分数据，确保页面上遍历卡片dom的真实顺序与平分的一致 document.querySelectorAll('.card-item'))
  let num = parseInt(cardList.length / 2);
  cardList.forEach((item, index) => {
    if (index < num) {
      cardList1.value.push(item);
      return;
    }
    cardList2.value.push(item);
  });
}

function caLFlex() {
  let arr1 = []; // 第一列的值
  let arr2 = []; // 第二列的值
  let heightArry_1 = []; // 第一列的卡片高度
  let heightArry_2 = []; // 第二列的卡片高度
  Array.from(document.querySelectorAll(".card-item")).forEach((item, index) => {
    if (index === 0) {
      // 第一行中的元素无需判断，直接加到新的数组中
      heightArry_1.push(item.offsetHeight);
      arr1.push(cardList[index]);
      return;
    }
    if (index === 1) {
      heightArry_2.push(item.offsetHeight);
      arr2.push(cardList[index]);
      return;
    }
    const heightTotal_1 = heightArry_1.length ? Array.from(heightArry_1).reduce((acc, cur) => acc + cur) : 0; // 第一列的总高度
    const heightTotal_2 = heightArry_2.length ? Array.from(heightArry_2).reduce((acc, cur) => acc + cur) : 0; // 第二列的总高

    // 找到最小值
    let minNumber = Math.min(heightTotal_1, heightTotal_2);
    switch (minNumber) {
      case heightTotal_1:
        heightArry_1.push(item.offsetHeight);
        arr1.push(cardList[index]);
        break;
      case heightTotal_2:
        heightArry_2.push(item.offsetHeight);
        arr2.push(cardList[index]);
        break;
    }
  });

  // 重新将数据赋值给各列数组
  cardList1.value = arr1;
  cardList2.value = arr2;
}
</script>

<style lang="less" scoped>
.page-main {
  background: #ffffff;
  height: 100vh;
  overflow: auto;
  // padding: 0 30px;
  .card {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    .card-item {
      visibility: hidden;
      margin-bottom: 20px;
      text-align: center;
      width: 187.5px;
      border-radius: 16px;
    }
    .visibles {
      visibility: visible;
    }
  }
}
</style>

三行

<template>
  <div class="page-main">
    <div class="card">
      <div class="coloum1">
        <div class="card-item" v-for="(item, index) in cardList1" :key="index" :style="[{ background: item.color }, { height: item.height }, { lineHeight: item.height }]" :class="{ visibles: isVisibility }">
          <p class="text">{{ item.num }}</p>
        </div>
      </div>
      <div class="coloum2">
        <div class="card-item" v-for="(item, index) in cardList2" :key="index" :style="[{ background: item.color }, { height: item.height }, { lineHeight: item.height }]" :class="{ visibles: isVisibility }">
          <p class="text">{{ item.num }}</p>
        </div>
      </div>
      <div class="coloum3">
        <div class="card-item" v-for="(item, index) in cardList3" :key="index" :style="[{ background: item.color }, { height: item.height }, { lineHeight: item.height }]" :class="{ visibles: isVisibility }">
          <p class="text">{{ item.num }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick } from "vue";
const cardList = reactive([
  // 测试数据
  {
    num: "0",
    color: "#FCCF0A",
    height: "100px"
  },
  {
    num: "1",
    color: "#e53e26",
    height: "200px"
  },
  {
    num: "2",
    color: "green",
    height: "300px"
  },
  {
    num: "3",
    color: "red",
    height: "100px"
  },
  {
    num: "4",
    color: "#000",
    height: "200px"
  },
  {
    num: "5",
    color: "blue",
    height: "300px"
  },
  {
    num: "6",
    color: "#691ba3",
    height: "100px"
  },
  {
    num: "7",
    color: "orange",
    height: "400px"
  },
  {
    num: "8",
    color: "yellow",
    height: "500px"
  },
  {
    num: "9",
    color: "#409eff",
    height: "100px"
  }
]);

const isVisibility = ref(true);
// 由于渲染时候对数据的两次赋值，则会出现一次闪现，需要防抖

onMounted(() => {
  equallyCard();
  nextTick(() => {
    caLFlex();
  }).then(() => {
    isVisibility.value = true;
  });
});

const cardList1 = ref([]); // 各列的数据
const cardList2 = ref([]);
const cardList3 = ref([]);

function equallyCard() {
  // 平分数据，确保页面上遍历卡片dom的真实顺序与平分的一致 document.querySelectorAll('.card-item'))
  let num = parseInt(cardList.length / 3);
  cardList.forEach((item, index) => {
    if (index < num) {
      cardList1.value.push(item);
      return;
    }
    if (index < 2 * num) {
      cardList2.value.push(item);
      return;
    }
    cardList3.value.push(item);
  });
}

function caLFlex() {
  let arr1 = []; // 第一列的值
  let arr2 = []; // 第二列的值
  let arr3 = []; // 第二列的值
  let heightArry_1 = []; // 第一列的卡片高度
  let heightArry_2 = []; // 第二列的卡片高度
  let heightArry_3 = []; // 第二列的卡片高度
  Array.from(document.querySelectorAll(".card-item")).forEach((item, index) => {
    if (index === 0) {
      // 第一行中的元素无需判断，直接加到新的数组中
      heightArry_1.push(item.offsetHeight);
      arr1.push(cardList[index]);
      return;
    }
    if (index === 1) {
      heightArry_2.push(item.offsetHeight);
      arr2.push(cardList[index]);
      return;
    }
    if (index === 2) {
      heightArry_3.push(item.offsetHeight);
      arr3.push(cardList[index]);
      return;
    }
    const heightTotal_1 = heightArry_1.length ? Array.from(heightArry_1).reduce((acc, cur) => acc + cur) : 0; // 第一列的总高度
    const heightTotal_2 = heightArry_2.length ? Array.from(heightArry_2).reduce((acc, cur) => acc + cur) : 0; // 第二列的总高
    const heightTotal_3 = heightArry_3.length ? Array.from(heightArry_3).reduce((acc, cur) => acc + cur) : 0; // 第三列的总高度

    // 找到最小值
    let minNumber = Math.min(heightTotal_1, heightTotal_2, heightTotal_3);
    switch (minNumber) {
      case heightTotal_1:
        heightArry_1.push(item.offsetHeight);
        arr1.push(cardList[index]);
        break;
      case heightTotal_2:
        heightArry_2.push(item.offsetHeight);
        arr2.push(cardList[index]);
        break;
      case heightTotal_3:
        heightArry_3.push(item.offsetHeight);
        arr3.push(cardList[index]);
        break;
    }
  });

  // 重新将数据赋值给各列数组
  cardList1.value = arr1;
  cardList2.value = arr2;
  cardList3.value = arr3;
}
</script>

<style lang="less" scoped>
.page-main {
  background: #ffffff;
  height: 100vh;
  overflow: auto;
  // padding: 0 30px;
  .card {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    .card-item {
      visibility: hidden;
      margin-bottom: 20px;
      text-align: center;
      width: 125px; 
      border-radius: 16px;
    }
    .visibles {
      visibility: visible;
    }
  }
}
</style>
赵啸林
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【sgWaterfall】自定义组件：Vue实现图文瀑布流布局模式，图片预加载显示占位区域阴影，加载完成后向上浮动动画出现，支持不同浏览器尺寸宽度下自适应显示列数，文本内容高度自适应。
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-13 1551
Vue实现图文瀑布流布局模式，图片预加载显示占位区域阴影，加载完成后向上浮动动画出现。
uniapp vue瀑布流自定义控件资源包
06-12
【uniapp vue瀑布流自定义控件资源包】是一个针对Vue.js框架的uniapp插件，主要用于实现瀑布流布局，这种布局方式常用于展示图片或商品列表，具有良好的视觉效果和用户体验。瀑布流布局的特点是每一列的高度不固定，...
vue瀑布流组件(vue-waterfall-easy 2.x)
02-21
vue瀑布流组件(vue-waterfall-easy 2.x) 这是一个vue组件，包含瀑布流布局和无限滚动加载 与其他实现相比，无需在返回的数据中指定图像的宽度和高度 正是因为有了第二项，图像才被预加载，然后进行布局 响应式布局，适应移动 易于使用
Vue实现图片瀑布流
qq_46083602的博客
02-26 405
Vue实现图片瀑布流，响应式，可用于壁纸图片的展示。
vue2.0实现瀑布流布局+虚拟列表，附带源码及效果预览视频
2301_76370692的博客
06-28 978
vue2.0实现瀑布流布局+虚拟列表，支持视窗大小改变布局也能动态变化，附带源码
【Vue瀑布流布局】vue简单实现瀑布流布局，循环数据自动排列到最短的列上【详细注释，直接使用】
seeeeeeeeeee的博客
09-05 6665
瀑布流布局是什么呢？应用于什么场景呢？简单描述一下，就是，瀑布流布局就是宽度一致，但是高度不限定死，最终通过算法排列，使得布局出现一种上下交错显示的感觉，看起来像是瀑布一样。应用场景：可以说非常多了，比如最常见的淘宝，蘑菇街等都是瀑布流布局做前端的肯定都会遇到这种情况需要使用瀑布流布局那么今天我就专门整理一个好用的瀑布流布局实现方法以后小伙伴们在需要做到这个布局的时候可以直接来着复制去改改就可以使用了。
Vue中如何进行瀑布流布局与图片加载优化
stormjun的博客
10-04 891
通过Vue.js，我们可以轻松地实现瀑布流布局和图片加载优化。在本文中，我们使用了axios来获取图片数据，vue-infinite-scroll库实现了无限滚动加载，而vue-lazyload库实现了图片懒加载。这些技术可以提高网页性能，减少加载时间，并提供更好的用户体验。希望本文能够帮助你在Vue.js项目中实现瀑布流布局和图片加载优化。
Vue瀑布流布局
薛文诚的博客
09-26 1268
虽然会写js的瀑布流布局，但是在Vue框架下使用，还是要稍作修改，毕竟要减少DOM操作。 原理依旧是 绝对定位+left+top 图片和文字还是有区别的，那就是渲染时间，所以我使用了onload，在图片渲染之后再进行瀑布流的布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content
vue瀑布流布局（完美方案）
热门推荐
讨口子
05-13 1万+
除了小程序瀑布流，当然h5列表的瀑布流布局也是很常见的，今天我们就来盘一下vue版的瀑布流布局方式 安排！ vue版如图： // 安装组件vue-waterfall2 npn install vue-waterfall2 -S // main.js 注册使用组件 import waterfall from 'vue-waterfall2' Vue.use(waterfall) // list.vue // 说明下：width/单个列表的宽度，gutterWidth/左列表距右侧的边距（博主这里的动态赋
Vue 瀑布流布局（封装组件）
倚树探星的博客
04-01 9428
一、什么是瀑布流布局 1. 样式展示 如下图所示，每个盒子宽高不同，且能够自适应屏幕变化的布局 2. 原理分析 利用定位，在最短的一列下面进行排列，如下图所示 图片容器宽度固定，高度根据图片自适应【定宽不定高】，图片一行不能排列时候，换行依次从左往右排列 来自：https://www.jianshu.com/p/337e277fe098 一、封装 vue 组件 代码来自：https://...
vue瀑布流布局实现与原理(其中一种方式)
JunVei的博客
08-12 950
vue瀑布流布局实现与原理(其中一种方式)
vue实现简单瀑布流布局
10-15
在本文中，我们将深入探讨如何使用Vue.js实现一个简单的瀑布流布局。瀑布流布局是一种常见的网页设计模式，它通常用于展示图像或内容，如社交媒体、电商产品列表等。这种布局的特点是容器宽度固定，而高度根据内容...
Vue瀑布流插件的使用示例
12-29
我自己写的一个的Vue瀑布流插件，列数自适应，不用设置每个卡片的高度。 测试页面：Page.vue 模板页面：WaterFollow.vue 和 WFColumn.vue 在Page.vue中，修改itemW的值，设置每列的最小宽度。例如：itemW=”200″...
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 465
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
vue3——利用自定义指令实现下拉框分页懒加载
zmy967131的博客
07-24 469
vue3——利用自定义指令实现下拉框分页懒加载
unplugin-vue-components 的作用是什么
前端原创分享，常年坚持记录和分享，全网阅读量超百万
07-25 376
总的来说,unplugin-vue-components 通过自动化组件的导入过程,大大简化了 Vue 项目的开发流程,提高了开发效率和代码质量。自动导入组件:无需手动 import 和注册组件,插件会自动识别并按需导入使用到的组件。支持第三方UI库:内置了多个流行UI库的解析器,可以自动导入第三方组件库的组件。灵活的配置:可以通过配置文件自定义导入行为,如排除某些组件或添加自定义解析器。支持全局组件:可以设置某些组件为全局组件,在所有地方都可以直接使用。支持自定义组件目录:可以配置多个自定义的组件目录。
通过不同方式在 Vue 3 中传递路由参数
最新发布
点点滴滴
07-25 655
通过path参数传递：在路由路径中定义动态参数，并使用将其作为 props 传递。通过query参数传递：在路由跳转时通过query参数传递数据，并在组件中使用useRoute获取。通过props选项传递：在路由配置中使用props选项传递静态或动态参数。
vue字段判断是否可以鼠标悬浮或者点击跳转
qq_58307541的博客
07-24 351
通过字段判断是否可以鼠标悬浮展示颜色 + 是否点击。
vue瀑布流布局案例
08-05
当然，我可以为您提供一个使用Vue实现的瀑布流布局案例。 首先，您需要安装Vue和vue-masonry-css插件。您可以通过以下命令来安装它们： ``` npm install vue vue-masonry-css``` 接下来，您可以创建一个Vue组件来实现瀑布流布局。下面是一个简单的示例： ```vue<template> <div class="masonry"> <div v-for="(item, index) in items" :key="index" class="item"> <!-- 在这里放置您的内容 --> <img :src="item.imageUrl" alt="Item Image" /> <p>{{ item.title }}</p> </div> </div> </template> <script> import VueMasonryCss from "vue-masonry-css"; export default { name: "MasonryLayout", data() { return { items: [ { imageUrl: "https://example.com/image1.jpg", title: "Item1" }, { imageUrl: "https://example.com/image2.jpg", title: "Item2" }, // 添加更多项目... ] }; }, components: { VueMasonryCss } }; </script> <style scoped> .masonry { display: flex; flex-wrap: wrap; } .item { width:200px; /* 每个项的宽度 */ } </style> ``` 在上述示例中，我们使用了vue-masonry-css插件来实现瀑布流布局。通过在外部容器上添加`.masonry`类，并设置`display: flex; flex-wrap: wrap;`，我们创建了一个弹性布局并使其换行。 每个项使用`.item`类来设置宽度，您可以根据自己的需求进行调整。 在`data`中，我们定义了一个`items`数组来存储每个项目的数据。您可以根据自己的需求修改该数组，并在模板中使用`v-for`指令来循环渲染每个项目。 这只是一个简单的示例，您可以根据自己的需求进行更改和扩展。希望对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值