<template>
    <div id="all_user">
        <div class="search_box">
            <input type="text" placeholder="請(qǐng)輸入編號(hào)或名稱">
            <button><i class="tt tt-quanburen"></i>搜索</button>
        </div>

        <vue-waterfall-easy :imgsArr="imgsArr" @scrollLoadImg="fetchImgsData">
        </vue-waterfall-easy>
    </div>
</template>

<script>
    import vueWaterfallEasy from 'vue-waterfall-easy'

    export default {
        components: {
            vueWaterfallEasy
        },
        data() {
            return {
                imgsArr: [],
                fetchImgsArr: []
            }
        },
        methods: {
            // 假數(shù)據(jù)
            initImgsArr(n, m) { //num 圖片數(shù)量
                let arr = [];
                for (let i = n; i < m; i++) {
                    arr.push({
                        id: i,
                        src: `../../../static/images/${i + 1}.jpg`,
                        link: '',
                        info: '一些圖片描述文字'
                    })
                }
                return arr
            },

            fetchImgsData() {
                console.log('是否執(zhí)行該方法')
                this.imgsArr = this.imgsArr.concat(this.fetchImgsArr)
            },
        },
        created() {
            this.imgsArr = this.initImgsArr(0, 5);
            this.fetchImgsArr = this.initImgsArr(5,9) // 模擬每次請(qǐng)求的新的圖片的數(shù)據(jù)數(shù)據(jù)
            console.log(1,this.imgsArr,2,this.fetchImgsArr)
        },

    }

</script>