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

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,
            }
        },
    }
}

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