vue2实现瀑布流布局_vue2瀑布流-CSDN博客

本文链接：https://blog.csdn.net/weixin_51958960/article/details/135921000

一、使用插件

npm install vue-waterfall2@1.8.20 --save （提示：一定要安装1.8.20，最新版会有一部分问题）

main.js文件使用

import waterfall from 'vue-waterfall2'

Vue.use(waterfall)

代码使用参考文档：vue瀑布流布局（完美方案）_vue瀑布流式页面布局-CSDN博客

<template>
  <div id="TestContainer">
    <waterfall :col='2'
      :width="(W - ((W < 500 && W >= 400 ? 400 : W >= 500 ? 500 : W) / 375 * 12) * 2 - ((W < 500 && W >= 400 ? 400 : W >= 500 ? 500 : W) / 375 * 12)) / 2"
      :gutterWidth="(W < 500 && W >= 400 ? 400 : W >= 500 ? 500 : W) / 375 * 12" :data="listBox">
      <template>
        <div class="box" v-for="item in listBox" :key="item.id">
          <img :src="item.images" alt="">
          <h5>{{ item.headline }}</h5>
        </div>
      </template>
    </waterfall>
  </div>
</template>

<script>
export default {
  data() {
    return {
      W: document.body.clientWidth || document.documentElement.clientWidth,
      listBox: [
        {
          id: 1, // 编号
          images: 'https://img01.yzcdn.cn/vant/cat.jpeg', // 大图
          headline: '1太湖有座岛，名叫“西山”', // 推荐文本
          userImg: 'https://p1-q.mafengwo.net/s15/M00/D7/1E/CoUBGV3Sr4yAV2q0AADUzHbBm_Y18.jpeg?imageMogr2%2Fthumbnail%2F%21200x200r%2Fgravity%2FCenter%2Fcrop%2F%21200x200%2Fquality%2F90', // 用户头像
          userName: '沃趣', // 用户名字
          pageView: 6666
        }, {
          id: 2, // 编号
          images: 'https://note.mafengwo.net/img/c6/60/d51965185e339ecf184b358a82757b70.jpeg?imageMogr2%2Fthumbnail%2F1360x%2Fstrip%2Fquality%2F90', // 大图
          headline: '2太湖有座岛，名叫“西山”', // 推荐文本
          userImg: 'https://p1-q.mafengwo.net/s15/M00/D7/1E/CoUBGV3Sr4yAV2q0AADUzHbBm_Y18.jpeg?imageMogr2%2Fthumbnail%2F%21200x200r%2Fgravity%2FCenter%2Fcrop%2F%21200x200%2Fquality%2F90', // 用户头像
          userName: '沃趣', // 用户名字
          pageView: 6666
        }, {
          id: 3, // 编号
          images: 'https://note.mafengwo.net/img/51/a7/149ca089ea04674204100a0178511458.jpeg?imageMogr2%2Fthumbnail%2F1360x%2Fstrip%2Fquality%2F90', // 大图
          headline: '3太湖有座岛，名叫“西山”', // 推荐文本
          userImg: 'https://p1-q.mafengwo.net/s15/M00/D7/1E/CoUBGV3Sr4yAV2q0AADUzHbBm_Y18.jpeg?imageMogr2%2Fthumbnail%2F%21200x200r%2Fgravity%2FCenter%2Fcrop%2F%21200x200%2Fquality%2F90', // 用户头像
          userName: '沃趣', // 用户名字
          pageView: 6666
        }, {
          id: 4, // 编号
          images: 'https://note.mafengwo.net/img/c7/55/ead3994fbdd95bc77b59feed06a1db0e.jpeg?imageMogr2%2Fthumbnail%2F1360x%2Fstrip%2Fquality%2F90', // 大图
          headline: '4太湖有座岛，名叫“西山”', // 推荐文本
          userImg: 'https://p1-q.mafengwo.net/s15/M00/D7/1E/CoUBGV3Sr4yAV2q0AADUzHbBm_Y18.jpeg?imageMogr2%2Fthumbnail%2F%21200x200r%2Fgravity%2FCenter%2Fcrop%2F%21200x200%2Fquality%2F90', // 用户头像
          userName: '沃趣', // 用户名字
          pageView: 6666
        }, {
          id: 5, // 编号
          images: 'https://note.mafengwo.net/img/6a/23/3db9f119449633453e2a9b368d1d8023.jpeg?imageMogr2%2Fthumbnail%2F1360x%2Fstrip%2Fquality%2F90', // 大图
          headline: '5太湖有座岛，名叫“西山”', // 推荐文本
          userImg: 'https://p1-q.mafengwo.net/s15/M00/D7/1E/CoUBGV3Sr4yAV2q0AADUzHbBm_Y18.jpeg?imageMogr2%2Fthumbnail%2F%21200x200r%2Fgravity%2FCenter%2Fcrop%2F%21200x200%2Fquality%2F90', // 用户头像
          userName: '沃趣', // 用户名字
          pageView: 6666
        }, {
          id: 6, // 编号
          images: 'https://note.mafengwo.net/img/20/1d/9cfa0e8bea955ff45890714e2af3ad43.jpeg?imageMogr2%2Fthumbnail%2F1360x%2Fstrip%2Fquality%2F90', // 大图
          headline: '6太湖有座岛，名叫“西山”', // 推荐文本
          userImg: 'https://p1-q.mafengwo.net/s15/M00/D7/1E/CoUBGV3Sr4yAV2q0AADUzHbBm_Y18.jpeg?imageMogr2%2Fthumbnail%2F%21200x200r%2Fgravity%2FCenter%2Fcrop%2F%21200x200%2Fquality%2F90', // 用户头像
          userName: '沃趣', // 用户名字
          pageView: 6666
        }, {
          id: 7, // 编号
          images: 'https://note.mafengwo.net/img/fd/d1/2f3fb6ab810f86a927d5940175c27f38.jpeg?imageMogr2%2Fthumbnail%2F1360x%2Fstrip%2Fquality%2F90', // 大图
          headline: '7太湖有座岛，名叫“西山”', // 推荐文本
          userImg: 'https://p1-q.mafengwo.net/s15/M00/D7/1E/CoUBGV3Sr4yAV2q0AADUzHbBm_Y18.jpeg?imageMogr2%2Fthumbnail%2F%21200x200r%2Fgravity%2FCenter%2Fcrop%2F%21200x200%2Fquality%2F90', // 用户头像
          userName: '沃趣', // 用户名字
          pageView: 6666
        }
      ]
    };
  },
};
</script>

<style>
* {
  margin: 0px;
  padding: 0px;
}

#TestContainer {
  margin: 0 auto;
  width: 100%;
  background-color: pink;
  column-fill: balance;
  /* column-count: 3; */
  /* column-gap: 1; */

}

img {
  width: 100%;
}
</style>

2、使用css布局参考文档：Vue2+CSS实现一个瀑布流布局案例_vue2 h5瀑布流式页面布局-CSDN博客

<template>
  <div id="TestContainer">
    <div class="box" v-for="item in listBox" :key="item.id">
      <img :src="item.images" alt="">
      <h5>{{ item.headline }}</h5>
    </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      listBox: [
        {
          id: 1, // 编号
          images: 'https://img01.yzcdn.cn/vant/cat.jpeg', // 大图
          headline: '1太湖有座岛，名叫“西山”', // 推荐文本
          userImg: 'https://p1-q.mafengwo.net/s15/M00/D7/1E/CoUBGV3Sr4yAV2q0AADUzHbBm_Y18.jpeg?imageMogr2%2Fthumbnail%2F%21200x200r%2Fgravity%2FCenter%2Fcrop%2F%21200x200%2Fquality%2F90', // 用户头像
          userName: '沃趣', // 用户名字
          pageView: 6666
        }, {
          id: 2, // 编号
          images: 'https://note.mafengwo.net/img/c6/60/d51965185e339ecf184b358a82757b70.jpeg?imageMogr2%2Fthumbnail%2F1360x%2Fstrip%2Fquality%2F90', // 大图
          headline: '2太湖有座岛，名叫“西山”', // 推荐文本
          userImg: 'https://p1-q.mafengwo.net/s15/M00/D7/1E/CoUBGV3Sr4yAV2q0AADUzHbBm_Y18.jpeg?imageMogr2%2Fthumbnail%2F%21200x200r%2Fgravity%2FCenter%2Fcrop%2F%21200x200%2Fquality%2F90', // 用户头像
          userName: '沃趣', // 用户名字
          pageView: 6666
        }, {
          id: 3, // 编号
          images: 'https://note.mafengwo.net/img/51/a7/149ca089ea04674204100a0178511458.jpeg?imageMogr2%2Fthumbnail%2F1360x%2Fstrip%2Fquality%2F90', // 大图
          headline: '3太湖有座岛，名叫“西山”', // 推荐文本
          userImg: 'https://p1-q.mafengwo.net/s15/M00/D7/1E/CoUBGV3Sr4yAV2q0AADUzHbBm_Y18.jpeg?imageMogr2%2Fthumbnail%2F%21200x200r%2Fgravity%2FCenter%2Fcrop%2F%21200x200%2Fquality%2F90', // 用户头像
          userName: '沃趣', // 用户名字
          pageView: 6666
        }, {
          id: 4, // 编号
          images: 'https://note.mafengwo.net/img/c7/55/ead3994fbdd95bc77b59feed06a1db0e.jpeg?imageMogr2%2Fthumbnail%2F1360x%2Fstrip%2Fquality%2F90', // 大图
          headline: '4太湖有座岛，名叫“西山”', // 推荐文本
          userImg: 'https://p1-q.mafengwo.net/s15/M00/D7/1E/CoUBGV3Sr4yAV2q0AADUzHbBm_Y18.jpeg?imageMogr2%2Fthumbnail%2F%21200x200r%2Fgravity%2FCenter%2Fcrop%2F%21200x200%2Fquality%2F90', // 用户头像
          userName: '沃趣', // 用户名字
          pageView: 6666
        }, {
          id: 5, // 编号
          images: 'https://note.mafengwo.net/img/6a/23/3db9f119449633453e2a9b368d1d8023.jpeg?imageMogr2%2Fthumbnail%2F1360x%2Fstrip%2Fquality%2F90', // 大图
          headline: '5太湖有座岛，名叫“西山”', // 推荐文本
          userImg: 'https://p1-q.mafengwo.net/s15/M00/D7/1E/CoUBGV3Sr4yAV2q0AADUzHbBm_Y18.jpeg?imageMogr2%2Fthumbnail%2F%21200x200r%2Fgravity%2FCenter%2Fcrop%2F%21200x200%2Fquality%2F90', // 用户头像
          userName: '沃趣', // 用户名字
          pageView: 6666
        }, {
          id: 6, // 编号
          images: 'https://note.mafengwo.net/img/20/1d/9cfa0e8bea955ff45890714e2af3ad43.jpeg?imageMogr2%2Fthumbnail%2F1360x%2Fstrip%2Fquality%2F90', // 大图
          headline: '6太湖有座岛，名叫“西山”', // 推荐文本
          userImg: 'https://p1-q.mafengwo.net/s15/M00/D7/1E/CoUBGV3Sr4yAV2q0AADUzHbBm_Y18.jpeg?imageMogr2%2Fthumbnail%2F%21200x200r%2Fgravity%2FCenter%2Fcrop%2F%21200x200%2Fquality%2F90', // 用户头像
          userName: '沃趣', // 用户名字
          pageView: 6666
        }, {
          id: 7, // 编号
          images: 'https://note.mafengwo.net/img/fd/d1/2f3fb6ab810f86a927d5940175c27f38.jpeg?imageMogr2%2Fthumbnail%2F1360x%2Fstrip%2Fquality%2F90', // 大图
          headline: '7太湖有座岛，名叫“西山”', // 推荐文本
          userImg: 'https://p1-q.mafengwo.net/s15/M00/D7/1E/CoUBGV3Sr4yAV2q0AADUzHbBm_Y18.jpeg?imageMogr2%2Fthumbnail%2F%21200x200r%2Fgravity%2FCenter%2Fcrop%2F%21200x200%2Fquality%2F90', // 用户头像
          userName: '沃趣', // 用户名字
          pageView: 6666
        }
      ]
    };
  },
};
</script>

<style>
#TestContainer {
  margin: 0 auto;
  width: 100%;
  background-color: pink;
  column-fill: balance;
  column-count: 3;
  column-gap: 1;

}

img {
  width: 100%;
}
</style>