vue+flex实现简单的2列瀑布流

<template>
    <div>
        <div class="zq-waterfall">
            <div class="zq-waterfall-left">
                <div class="box" v-for="(item,index) in itemsA" :key="index">
                    <img :src="item.img" alt="">
                </div>
            </div>
            <div class="zq-waterfall-right">
                <div class="box" v-for="(item,index) in itemsB" :key="index">
                    <img :src="item.img" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                items: [
                    { img:'./static/img/adshop/1.png'},
                    { img:'./static/img/adshop/2.png'},
                    { img:'./static/img/adshop/3.png'},
                    { img:'./static/img/adshop/4.png'},
                    { img:'./static/img/adshop/5.png'},
                    { img:'./static/img/adshop/6.png'},
                    { img:'./static/img/adshop/7.png'},
                    { img:'./static/img/adshop/5.png'},
                    { img:'./static/img/adshop/6.png'},
                    { img:'./static/img/adshop/7.png'},
                ],
                itemsA:[],
                itemsB:[]
            }
        },
        computed: {},
        mounted: function () {
            this.getData()
        },
        methods: {
            // 方法
            getImg(url, callback){
                var img = new Image();
                img.src = url;
                //如果图片被缓存，则直接返回缓存数据
                if(img.compltet){
                    /* callback(img.width, img.height); */
                    callback(img.width, img.height, Number(img.height)/Number(img.width));
                }else{
                    //完全加载完毕的事件
                    img.onload = function(){
                        /* callback(img.width, img.height); */
                        callback(img.width, img.height, Number(img.height)/Number(img.width));
                    }
                }
            },
            getData(){
                // 加载完页面执行的函数
                let boxA = document.getElementsByClassName('zq-waterfall-left')[0].clientHeight
                let boxB = document.getElementsByClassName('zq-waterfall-right')[0].clientHeight
                let that = this;
                for(let val of this.items){
                    that.getImg(val.img,function (w,h,r) {
                        console.log(w)
                        boxA = document.getElementsByClassName('zq-waterfall-left')[0].clientHeight
                        boxB = document.getElementsByClassName('zq-waterfall-right')[0].clientHeight
                        if(boxA>boxB){
                            that.itemsB.push(val)
                        }else{
                            that.itemsA.push(val)
                        }
                    })
                }
            }
        },
        components: {
            // 组件
        }
    }
</script>
<style scoped lang="scss">
    .zq-waterfall{
        padding: 0 0.1615rem;
        .box{
            margin-bottom: 0.333rem;
            img{
                width: 100%;
                border-radius: 0.133rem;
                display: block;
            }
        }
        .zq-waterfall-left{
            float: left;
            width: 4.5rem;
            margin: 0 0.1615rem 0.333rem;
            background-color: #ccc;
        }
        .zq-waterfall-right{
            float: left;
            width: 4.5rem;
            margin: 0 0.1615rem 0.333rem;
            background-color: #f47a91;
        }
    }
</style>