vue.js实现一个瀑布流的组件

 更新时间:2023年06月06日 11:59:18   作者:我是好人  
这篇文章主要为大家介绍了vue.js实现一个瀑布流的组件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

引言

我所见过的瀑布流都是固定的几列,然后每一列包含若干个元素(图文元素),每一列的总高度都差不多。
所以我这个组件的功能就很简单,可以设置列数量,然后只要再写一个渲染元素的方法,即可使用。

组件说明

组件名:<tag-autoflow />

参数名类型说明
dataArray数据源
column_sizeNumber列的数量
renderItemFunction目前只能通过render函数渲染子元素,还不支持模板。
有三个参数
h,
item,将被渲染的元素
next,是一个function,在渲染子元素的合适时机(例如img的onload事件里),调用next()即可。
如不调用next将只能渲染一个元素,无法继续渲染。

源代码在此

简单的使用例子

export default {
    data() {
        // 随机生成20个测试数据
        const num = 20;
        var list = new Array(num).fill(0).map((v, i) => {
            return this.createItem(i);
        })
        return {
            list,
        }
    },
    // 直接用render函数来写,因为我觉得这样写props更直观一点
    render(h){
        return h('tag-autoflow', {
            props:{
                // 设置列数量
                column_size:3,
                // 数据源
                data: this.list,
                // 渲染item的方法,参数目前提供三个
                // h 瀑布流组件的createElement方法,非父组件的
                // item 要渲染的元素对象
                // next 必须主动调用next,插件才会自动去渲染下一个元素,详细说明见下文
                renderItem(h, item, next){
                    // 简单的渲染一个img跟一个p标签
                    // 因为img标签的图片加载需要时间,而图片影响了计算所在列的高度
                    // 所以需要在img触发了load事件后,再去调用next渲染下一个item。
                    return h('div', [
                        h('img', {
                            attrs: {
                                src: item.img
                            },
                            on: {
                                load: e => {
                                    next();
                                }
                            }
                        }),
                        h('p', item.title)
                    ])
                },
            },
        });
    },
    methods:{
        createItem(i) {
            var title = i + ',' + new Array(_.random(10, 150)).fill('哈').join('');
            var img = `http://via.placeholder.com/${_.random(100, 400)}x${_.random(100, 400)}`;
            return {
                img,
                title,
            }
        },
    }
}

渣渣效果图

代码里是一次性生成的20个元素,页面渲染的时候,很明显的能看出来是在一个img触发了load事件之后才渲染下一个元素。
如果花点心思加一些动画效果应该很酷吧。

如果你要渲染的item不包含图片,纯文字的话,可以通过这种写法调用next。保证了计算列高度的准确性。

renderItem(h, item, next){
    this.$nextTick(function(){
        next();
    });
    return h('p', item.title);
},

瀑布流的流程说明

  • 先根据参数生成对应数量的列,
  • 判断data是否有元素,没有就结束。
  • 从data里面shift()拿到一个元素item,
  • 找出当前高度最小的一列,将item放入该列。
  • 渲染item,然后调用next()方法进入2

TODO

  • 瀑布流还有个常见的功能就是滚动加载了,目前尚未加入此功能,会尽快加上。
  • 元素加载的过渡动画

以上就是vue.js实现一个瀑布流的组件的详细内容,更多关于vue.js瀑布流组件的资料请关注脚本之家其它相关文章!

相关文章

  • Vue mixin实现组件功能复用示例详解

    Vue mixin实现组件功能复用示例详解

    这篇文章主要为大家介绍了Vue mixin实现组件功能复用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • vue.js 自定义指令(拖拽、拖动、移动) 指令 v-drag详解

    vue.js 自定义指令(拖拽、拖动、移动) 指令 v-drag详解

    这篇文章主要介绍了vue.js 自定义指令(拖拽、拖动、移动) 指令 v-drag,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • vue.js整合vux中的上拉加载下拉刷新实例教程

    vue.js整合vux中的上拉加载下拉刷新实例教程

    这篇文章主要给大家介绍了关于vue.js整合vux中上拉加载下拉刷新的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • 在Vue组件中使用 TypeScript的方法

    在Vue组件中使用 TypeScript的方法

    typescript不仅可以约束我们的编码习惯,还能起到注释的作用,当我们看到一函数后我们立马就能知道这个函数的用法。这篇文章主要介绍了在Vue组件中使用 TypeScript的方法,需要的朋友可以参考下
    2018-02-02
  • Vue实现选择城市功能

    Vue实现选择城市功能

    这篇文章主要介绍了Vue实现选择城市功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-05-05
  • 一文详解Vue中可重用组件的3个主要问题

    一文详解Vue中可重用组件的3个主要问题

    当我们谈论或讨论在 Vue 中创建用户界面组件时,经常会提到可重用性,在 Vue 中创建真正的可重用组件可能很棘手,在本文中,我将探讨可重用组件的概念、应用这些组件时面临的问题,以及为什么必须尽可能克服这些问题,需要的朋友可以参考下
    2023-10-10
  • Vue中用JSON实现刷新界面不影响倒计时

    Vue中用JSON实现刷新界面不影响倒计时

    这篇文章主要为大家详细介绍了Vue中用JSON实现刷新界面不影响倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • vue.js响应式原理解析与实现

    vue.js响应式原理解析与实现

    这篇文章主要为大家详细介绍了vue.js响应式原理解析与实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • vue3.0 的 Composition API 的使用示例

    vue3.0 的 Composition API 的使用示例

    这篇文章主要介绍了vue3.0 的 Composition API 的使用示例,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
    2020-10-10
  • element表格变化后自动刷新的两种方案

    element表格变化后自动刷新的两种方案

    本文主要介绍了element表格变化后自动刷新的两种方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04

最新评论