vue2实现瀑布流布局

vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

项目地址：https://gitcode.com/gh_mirrors/vu/vue

免费下载资源

小蜗850

2836人浏览 · 2024-01-29 21:07:34

小蜗850 · 2024-01-29 21:07:34 发布

一、使用插件

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>

GitHub 加速计划 / vu / vue

108

下载

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

最近提交(Master分支：3 个月前 )

9e887079 [skip ci] 1 年前

73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐