vue实现瀑布流

于 2024-01-31 17:55:10 发布
阅读量2.8k 收藏 37
点赞数 22
分类专栏： 瀑布流 vue.js html 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Summer_JK/article/details/135959302
版权
vue.js 同时被 3 个专栏收录
51 篇文章 0 订阅
订阅专栏
html
8 篇文章 0 订阅
订阅专栏
瀑布流
1 篇文章 0 订阅
订阅专栏
  1. 每个色块宽度一致，高度自适应
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="user-scalable=0">
  <title>Vertical Line</title>
  <link rel="stylesheet" href="./common/css/style.css">
  <style>
    .item-move {
      transition: all .5s cubic-bezier(.55, 0, .1, 1);
      -webkit-transition: all .5s cubic-bezier(.55, 0, .1, 1);
    }
  </style>
</head>

<body>
  <div id="app">
    <waterfall :align="align" :line-gap="200" :min-line-gap="100" :max-line-gap="220" :single-max-width="300"
      :watch="items" @reflowed="reflowed" ref="waterfall">
      <!-- each component is wrapped by a waterfall slot -->
      <waterfall-slot v-for="(item, index) in items" :width="item.width" :height="item.height" :order="index"
        :key="item.index" move-class="item-move">
        <div class="item" :style="item.style" :index="item.index"></div>
      </waterfall-slot>
    </waterfall>
  </div>
  <script src="https://cdn.jsdelivr.net/vue/2.2.6/vue.min.js"></script>
  <script src="http://app.moptym.com/cdn/vue-waterfall/vue-waterfall.min.js"></script>
  <script src="./common/js/item-factory.js"></script>
  <script>

    var app = new Vue({
      el: '#app',
      components: {
        'waterfall': Waterfall.waterfall,
        'waterfall-slot': Waterfall.waterfallSlot
      },
      data: {
        align: 'center',
        items: ItemFactory.get(100),
        isBusy: false
      },
      methods: {
        addItems: function () {
          if (!this.isBusy && this.items.length < 500) {
            this.isBusy = true
            this.items.push.apply(this.items, ItemFactory.get(50))
          }
        },
        shuffle: function () {
          this.items.sort(function () {
            return Math.random() - 0.5
          })
        },
        reflowed: function () {
          this.isBusy = false
        }
      }
    })

    document.body.addEventListener('click', function () {
      app.shuffle()
      // app.$refs.waterfall.$emit('reflow') // manually trigger reflow action
    }, false)

    window.addEventListener('scroll', function () {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop + window.innerHeight >= document.body.clientHeight) {
        app.addItems()
      }
    })

  </script>
</body>

</html>

如图所示：
在这里插入图片描述

  1. 每个色块高度一致，宽度自适应
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="user-scalable=0">
  <title>Horizontal Line</title>
  <link rel="stylesheet" href="./common/css/style.css">
  <style>
    .item-move {
      transition: all .5s cubic-bezier(.55, 0, .1, 1);
      -webkit-transition: all .5s cubic-bezier(.55, 0, .1, 1);
    }
  </style>
</head>

<body>
  <div id="app">
    <waterfall :line="line" :line-gap="200" :min-line-gap="180" :max-line-gap="220" :watch="items" @reflowed="reflowed"
      ref="waterfall">
      <!-- each component is wrapped by a waterfall slot -->
      <waterfall-slot v-for="(item, index) in items" :width="item.width" :height="item.height" :order="index"
        :key="item.index" move-class="item-move">
        <div class="item" :style="item.style" :index="item.index"></div>
      </waterfall-slot>
    </waterfall>
  </div>
  <script src="https://cdn.jsdelivr.net/vue/2.2.6/vue.min.js"></script>
  <script src="http://app.moptym.com/cdn/vue-waterfall/vue-waterfall.min.js"></script>
  <script src="./common/js/item-factory.js"></script>
  <script>

    var app = new Vue({
      el: '#app',
      components: {
        'waterfall': Waterfall.waterfall,
        'waterfall-slot': Waterfall.waterfallSlot
      },
      data: {
        line: 'h',
        items: ItemFactory.get(100),
        isBusy: false
      },
      methods: {
        addItems: function () {
          if (!this.isBusy && this.items.length < 500) {
            this.isBusy = true
            this.items.push.apply(this.items, ItemFactory.get(50))
          }
        },
        shuffle: function () {
          this.items.sort(function () {
            return Math.random() - 0.5
          })
        },
        reflowed: function () {
          this.isBusy = false
        }
      }
    })

    document.body.addEventListener('click', function () {
      app.shuffle()
      // app.$refs.waterfall.$emit('reflow') // manually trigger reflow action
    }, false)

    window.addEventListener('scroll', function () {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop + window.innerHeight >= document.body.clientHeight) {
        app.addItems()
      }
    })

  </script>
</body>

</html>

如图所示：
在这里插入图片描述

  1. 宽高不限制，每个色块顺着排
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="user-scalable=0">
  <title>Vertical Line With Grow</title>
  <link rel="stylesheet" href="./common/css/style.css">
  <style>
    .item-move {
      transition: all .5s cubic-bezier(.55, 0, .1, 1);
      -webkit-transition: all .5s cubic-bezier(.55, 0, .1, 1);
    }
  </style>
</head>

<body>
  <div id="app">
    <waterfall :grow="grow" :watch="items" @reflowed="reflowed" ref="waterfall">
      <!-- each component is wrapped by a waterfall slot -->
      <waterfall-slot v-for="(item, index) in items" :width="item.width" :height="item.height" :order="index"
        :key="item.index" move-class="item-move">
        <div class="item" :style="item.style" :index="item.index"></div>
      </waterfall-slot>
    </waterfall>
  </div>
  <script src="https://cdn.jsdelivr.net/vue/2.2.6/vue.min.js"></script>
  <script src="http://app.moptym.com/cdn/vue-waterfall/vue-waterfall.min.js"></script>
  <script src="./common/js/item-factory.js"></script>
  <script>

    var app = new Vue({
      el: '#app',
      components: {
        'waterfall': Waterfall.waterfall,
        'waterfall-slot': Waterfall.waterfallSlot
      },
      data: {
        grow: [3, 2, 1, 2],
        items: ItemFactory.get(100),
        isBusy: false
      },
      methods: {
        addItems: function () {
          if (!this.isBusy && this.items.length < 500) {
            this.isBusy = true
            this.items.push.apply(this.items, ItemFactory.get(50))
          }
        },
        shuffle: function () {
          this.items.sort(function () {
            return Math.random() - 0.5
          })
        },
        reflowed: function () {
          this.isBusy = false
        }
      }
    })

    document.body.addEventListener('click', function () {
      app.shuffle()
      // app.$refs.waterfall.$emit('reflow') // manually trigger reflow action
    }, false)

    window.addEventListener('scroll', function () {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop + window.innerHeight >= document.body.clientHeight) {
        app.addItems()
      }
    })

  </script>
</body>

</html>

如图所示：
在这里插入图片描述

天使的同类
关注
  • 22
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【sgWaterfall】自定义组件：Vue实现图文瀑布流布局模式，图片预加载显示占位区域阴影，加载完成后向上浮动动画出现，支持不同浏览器尺寸宽度下自适应显示列数，文本内容高度自适应。
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-13 1459
Vue实现图文瀑布流布局模式，图片预加载显示占位区域阴影，加载完成后向上浮动动画出现。
vue.js组件vue-waterfall-easy实现瀑布流效果
12-12
想必大家应该很多都已经习惯了jquery的DOM操作，jquery的瀑布流实现起来也很容易。 但是，随着时代的发展，随着时代的进步….. 算了算了，扯远了，既然能找到这儿来，肯定是在vue.js上已经有一定的基础了，咱们废话不多说，直接进入主题。 vue-waterfall-easy easy! easy! easy! 重要的事情说三遍！！！ 所以说，咱们今天用到的不是大家熟知的vue-waterfall，而是vue-waterfall-easy； 一、获取vue-waterfall-easy组件 这里有两种方式： 第一种就是直接从git上复制vue-waterfall-easy组件的完整代码
vue瀑布流组件(vue-waterfall-easy 2.x)
02-21
vue瀑布流组件(vue-waterfall-easy 2.x) 这是一个vue组件，包含瀑布流布局和无限滚动加载 与其他实现相比，无需在返回的数据中指定图像的宽度和高度 正是因为有了第二项，图像才被预加载，然后进行布局 响应式布局，适应移动 易于使用
css+html+jquery+vue实现瀑布流代码包 应用过项目实例，可以加载数据，组件内容丰富可直接使用。
08-10
css+html+jquery+vue实现瀑布流代码包 应用过项目实例，可以加载数据，组件内容丰富可直接使用。
vue实现瀑布流的方式
lxs19930928的博客
12-01 3671
瀑布流
vue瀑布流布局
weixin_49295874的博客
05-25 1701
'瀑布流’是前端的一种’布局’方式，就像我们经常’搜百度’看到的’图片列表’都是’瀑布流’完成的，如下图，‘瀑布流’会根据’某一列’的’高度’，来自动向’最低高度’的一’列’下面继续添加元素，下面是在’vue’项目中使用’瀑布流’的案例。
vue 实现瀑布流布局的 组件/插件总汇：vue-waterfall、vue-waterfall-easy、vue-virtual-collection、vue-grid-layout
愿我如星君如月 ... 夜夜流光相皎洁 ...
05-16 4732
转自：http://www.fly63.com/article/detial/1134 瀑布流作为当前比较流行的一种网页布局方式，在视觉上呈现出参差不齐、琳琅满目、唯美的视觉效果，该布局随着页面滚动，数据不断加载并附加至当前页面的尾部。这篇文章主要介绍关于vue框架中常使用的瀑布流组件，大家根据需求来进行选择。 一、vue-waterfall waterfall是一个vue.js瀑布流布局组...
用 vue 实现瀑布流
weixin_41018377的博客
11-18 1万+
最近看到一篇好文章，讲了关于如何用 Vue 来实现瀑布流，学习后自己动手写了一个简单的 demo。 瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。类似小红书主页一样，每张图片的宽度都设置为一样，但是高度是根据内容变化的，实现一个不规则的排列。 原理 原理其实很简单，简单来说就是把每张图都设置为绝对定位，再根据宽高设置图片的偏移值，则 left 和 top 属性确定位置。 如上图，可以看到，前五张图排在第一行（demo 设置 PC 浏览器显示 5 列，移动端浏览器显示 2 列）。 接
Vue3瀑布流（Waterfall）
Mr Dear的博客
04-18 7188
Vue3+TS使用JS计算方式实现的瀑布流图片展示组件。
Vue2瀑布流图片展示（Waterfall）
Mr Dear的博客
12-06 4091
Vue2使用纯CSS和JS计算两种方式实现的瀑布流图片展示组件
【Vue瀑布流布局】vue简单实现瀑布流布局，循环数据自动排列到最短的列上【详细注释，直接使用】
seeeeeeeeeee的博客
09-05 6363
瀑布流布局是什么呢？应用于什么场景呢？简单描述一下，就是，瀑布流布局就是宽度一致，但是高度不限定死，最终通过算法排列，使得布局出现一种上下交错显示的感觉，看起来像是瀑布一样。应用场景：可以说非常多了，比如最常见的淘宝，蘑菇街等都是瀑布流布局做前端的肯定都会遇到这种情况需要使用瀑布流布局那么今天我就专门整理一个好用的瀑布流布局实现方法以后小伙伴们在需要做到这个布局的时候可以直接来着复制去改改就可以使用了。
vue实现简单瀑布流布局
11-21
vue简单实现瀑布流布局的一种方式（vue瀑布流组件），供大家参考，具体内容如下 vue中的瀑布流布局组件 需求：图片容器宽度固定，高度根据图片自适应，图片一行不能排列时候，换行依次从左往右排列。（瀑布流概念） 另外结合vue-lazy实现懒加载 （ npm i vue-lazyload –save-dev） 使用也很简单，在需要懒加载的img标签上将:src换成v-lazy 父组件传递数据： waterfallData:[ { e_img: "test.jpg", // 图片 e_intro: "描述信息", u_img: "test.jpeg", // 标记图
vue实现瀑布流组件滑动加载更多
01-19
建议先看vue瀑布流组件上拉加载更多再来食用本文，如果直接想看源码文末就是~ 文末新增组件优化，之所以没有删优化前的代码是想让以后自己还能看到走过的路。 上一篇讲到在项目中使用上拉加载更多组件，但是由于实际项目开发中由于需求变更或者说在webview中上拉加载有些机型在上拉时候会把webview也一起上拉导致上拉加载不灵敏等问题，我们有时候也会换成滑动到底部自动加载的功能。 既然都是加载更多，很多代码思想势必相似，主要区别在于上拉和滑动到底部这个操作上，所以，我们需要注意： 1、上拉加载是point指针touch触摸事件，现在因为是滑动加载，需要添加scroll事件去监听然后执行相应回调 2、
vue瀑布流组件实现上拉加载更多
12-28
最近在做移动端h5页面，所以分页什么的就不能按照传统pc端的分页器的思维去做了，这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多，符合正常使用习惯。 首先简单写一下模板部分的html代码,，很简单清晰的逻辑： <template> <div class=loadmore> <div class=loadmore__body> <slot></slot> </div> <div class=loadmore__footer> <span v-if=loading> <i class=tc-loading></i> <span>正在加载</s
uniapp路由跳转的六种方式
热门推荐
Summer_JK的博客
07-20 2万+
uniapp路由跳转的六种方式。
VUE实现页面局部刷新
Summer_JK的博客
10-23 9513
vue实现页面刷新 在我的页面里有使用过三种页面刷新的方法，接下来挨个介绍下： 一、当前窗口刷新 window.location.reload() //页面刷新 二、路由切换方式 this.$router.push("需要刷新的页面地址"); //页面刷新 以上两种方式都可以有页面刷新的效果，但是缺点就是会出现空白页，第三种方式就可以解决这一缺点，我们一起来看看。。。 三、provide / inject 组合方式 首先在你的App.vue页面添加v-if=“isRouterAlive”，如以下代码
解决uni-app小程序获取路由及路由参数
Summer_JK的博客
07-19 8018
代码】解决uni-app小程序获取路由及路由参数。
vue实现瀑布流布局
最新发布
07-28
Vue可以通过使用第三方库来实现瀑布流布局。一个常用的库是Masonry，它提供了一个Vue组件来实现瀑布流布局。 首先，你需要安装Masonry库。可以通过命令行运行以下命令来安装： ``` npm install vue-masonry --save ``` 安装完成后，在你的Vue组件中引入Masonry库： ```javascript import VueMasonry from 'vue-masonry' ``` 接下来，在你的Vue组件中使用Masonry组件，并传入要展示的内容： ```html <template> <div> <vue-masonry> <div v-for="item in items" :key="item.id" class="grid-item"> <!-- 这里是每个瀑布流项的内容 --> </div> </vue-masonry> </div> </template> ``` 在上面的代码中，我们使用`v-for`指令遍历数据数组`items`，并为每个项生成一个`div`元素作为瀑布流的一列。 最后，记得在Vue组件中注册Masonry组件： ```javascript export default { components: { VueMasonry }, data() { return { items: [ // 这里是你的数据 ] } } } ``` 这样就可以实现一个简单的瀑布流布局。你可以根据具体需求对样式进行调整，比如设置每列的宽度、间距等。 希望对你有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值