Vue 瀑布流

最新推荐文章于 2024-01-19 11:51:37 发布

HQEasy

最新推荐文章于 2024-01-19 11:51:37 发布

阅读量163

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_42521446/article/details/115362354

版权

前端专栏收录该内容

9 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

    <style type="text/css">
        #fall-list {
            position: relative;
        }
        #fall-list .fall-line {
            float: left;
            width: 50%;
        }
        #fall-list .fall-item {
            width: 96%;
            margin: 5px auto;
            background-color: #fff
        }
        #fall-list .fall-item img {
            width: 100%;
        }
    </style>
</head>
<body>

<div id="app">
    <button @click="loadImagex">加载</button>
    <div id="fall-list" class="clearfix">
        <div ref="line1" class="fall-line">
            <div class="fall-item" v-for="(src, index) in data1" :key="index">
                <img :src="src">
            </div>
        </div>

        <div ref="line2" class="fall-line">
            <div class="fall-item" v-for="(src, index) in data2" :key="index">
                <img :src="src">
            </div>
        </div>
    </div>

</div>

<script src="../../../assets/vue/vue.js"></script>
<script>

    var app = new Vue({
        el: '#app',
        components: {},
        props: {},
        data: function () {
            return {
                data1: [],
                data2: [],
            }
        },
        computed: {},
        watch: {},
        mounted: function () {
            var self = this;
            this.loadImagex()
        },
        methods: {
            //读取图片
            loadImagex() {
                let size = ['300x660', '300x300', '300x350', '300x200', '300x310', '300x470', '300x500', '300x510', '300x200'];
                let color = ['E97452', '4C6EB4', '449F93', 'D25064', 'E59649', '4C6EB4', '449F93', 'D25064', 'E59649'];

                let imgList = [];
                for (let i = 0; i < size.length; i++) {
                    let url = `http://dummyimage.com/${size[i]}/${color[i]}`
                    imgList.push(url);
                }

                this.doSort(0, imgList);
            },
            doSort(index, list) {
                if(index < list.length) {
                    if(this.$refs.line1.offsetHeight <= this.$refs.line2.offsetHeight) {
                        this.data1.push(list[index]);
                    } else {
                        this.data2.push(list[index]);
                    }
                    let that = this;
                    this.$nextTick(() => {
                        setTimeout(() => {
                            that.doSort(index+1, list);
                        }, 400);
                    })
                }
            },

        },
    })
</script>
</body>
</html>