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

最新推荐文章于 2025-06-18 09:30:00 发布

你蠢哭我咯

最新推荐文章于 2025-06-18 09:30:00 发布

阅读量9.8k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue-js flex 瀑布流文章标签： flex vue

本文链接：https://blog.youkuaiyun.com/m0_38069630/article/details/79788081

vue-js 同时被 3 个专栏收录

53 篇文章

订阅专栏

flex

1 篇文章

订阅专栏

瀑布流

1 篇文章

订阅专栏

本文介绍了一种使用Vue.js实现的瀑布流布局方案。通过动态计算左右两侧容器的高度，并基于图片的真实尺寸来决定图片放置的位置，确保了瀑布流效果的平滑过渡。该方案涉及图片加载完成后的尺寸获取、容器高度的实时比较等关键技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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