用vue.js写的一个瀑布流的组件

AlphaWallet 发布于2019-08-21 12:01 / 2471人阅读

摘要：有三个参数将被渲染的元素是一个，在渲染子元素的合适时机例如的事件里，调用即可。从里面拿到一个元素，找出当前高度最小的一列，将放入该列。渲染，然后调用方法进入瀑布流还有个常见的功能就是滚动加载了，目前尚未加入此功能，会尽快加上。

很少写文章，很乱，，见谅。

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

组件说明

组件名：

参数名	类型	说明
data	Array	数据源
column_size	Number	列的数量
renderItem	Function	目前只能通过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

瀑布流还有个常见的功能就是滚动加载了，目前尚未加入此功能，会尽快加上。

元素加载的过渡动画

云服务器 GPU云服务器用JavaScript写的 linux用什么写的 webrtc用什么写的 python用c写的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87358.html

angular组件－特殊的瀑布流（原创）

摘要：正如上篇文章说的，由于项目中的样式有点特殊要求，所以自己在项目中写了一个瀑布流组件，在这里分享下，由于最近没太多时间，趁中秋把这个组件发上来，写的不是很详细，毕竟中秋，我的心已经发出去啦。 ng-water-scroll 正如上篇文章说的，由于项目中的样式有点特殊要求，所以自己在项目中写了一个瀑布流组件，在这里分享下，由于最近没太多时间，趁中秋把这个组件发上来，写的不是很详细，毕竟中秋...

Yi_Zhi_Yu 2019-08-20 11:02 评论0 收藏0
angular组件(ngKeybordSelect)－通过键盘实现多选

摘要：在刚刚结束的交易系统项目中有几个需求是让我感觉要花点时间的如何更优雅的使用的框。通过键盘实现多选，批量选的功能。所以自己写了后面两个指令。在刚刚结束的angular交易系统项目中有几个需求是让我感觉要花点时间的如何更优雅的使用angular-bootstrap 的 Modal框。通过键盘实现ctrl多选，shfit批量选的功能。如何在angular去实现瀑布流后面两个我都...

novo 2019-08-20 10:33 评论0 收藏0
【简单好用，支持懒加载】 vue-waterfall2 基于Vue.js 瀑布流组件

摘要：不需知道元素宽高，可宽高自适应自定义程度高支持懒加载提供端滑动到底部触发，端需要上拉触发使用极为简便适用于有问题欢迎提前端工程化算法注意需要与一起使用才会生效，否则会进行自适应宽度使用布局时，需先计算出自适应后的宽度再传值使用了的 vue-waterfall2 1.不需知道元素宽高，可宽高自适应 2.自定义程度高 3.支持懒加载(lazy-src) 4.提供Event:loadmor...

james 2019-08-26 12:24 评论0 收藏0
前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 评论0 收藏0
avalon与masonry的结合

摘要：相关组件版本最近，在公司的项目中，要开发一个使用瀑布流的前台，衡量了各种解决方案后，还是觉得最成熟，所以就选用了它。测试的结果很令人沮丧，依然没有控制节点的位置，所以应该不是这个问题。相关组件版本：avalon 1.3.6、masonry 3.1.5 最近，在公司的项目中，要开发一个使用瀑布流的前台，衡量了各种解决方案后，还是觉得masonry最成熟，所以就选用了它。而在之前开发后台...

Kosmos 2019-08-22 10:59 评论0 收藏0