vue瀑布流布局

<template>
    <div class="vote">
        <div class="" style="position: fixed;top: 0;z-index: 1;width: 100%;">
            <div class="vote-top">
                <p><img src="../../assets/img/home/logo2.png" alt="" @click='()=>{this.$router.go(-1)}'></p>
                <p @click='explainShow'><span>活動說明</span></p>
            </div>
            <div class="vote-today">
                <p>今日剩余投票數</p>
                <p><span>普通票：{{vote.common}}</span><span style="color:#3554E3;padding-left: 30px; ">超級票：{{vote.super}}</span></p>
                <p><input type="text" v-model='form.keyword' placeholder="搜索名字"><img src="../../assets/img/home/logo-7.png" alt="" @click='getVoteInfo(3)'></p>
            </div>
            <div class="search">
                <p @click='getVoteInfo(1)'><span :class="newShow==1?'newText':''">按最新</span><img v-show="newShow==1?'newText':''" class="newImg" src="../../assets/img/home/zhi-xian.png" alt=""></p>
                <p @click='getVoteInfo(2)'><span :class="newShow==2?'newText':''">按票數</span><img v-show="newShow==2?'newText':''" class="newImg" src="../../assets/img/home/zhi-xian.png" alt=""></p>
            </div>
        </div>
        <div style="width: 100%;height: 300px"></div>
        <div class="vote-content">
            <div class="content item1">
                <div v-for='(item,index) in arrListLeft' :key='index' class="list" @click='getJump(item.id)'>
                    <p>
                        <van-image :src="item.avatar" width="158px" fit="contain"></van-image>
                    </p>
                    <p><span>{{item.name}}</span><span><small style="font-size: 20px;color:#3554E3 ">{{item.votes}}</small> 票</span></p>
                    <p><button>投TA一票</button></p>
                    <p><span>{{item.id}}</span>號</p>
                </div>
            </div>
            <div class="content item2">
                <div v-for='(item,index) in arrListRight' :key='index' class="list" @click='getJump(item.id)'>
                    <p>
                        <van-image :src="item.avatar" width="158px" fit="contain"></van-image>
                    </p>
                    <p><span>{{item.name}}</span><span><small style="font-size: 20px;color:#3554E3 ">{{item.votes}}</small> 票</span></p>
                    <p><button>投TA一票</button></p>
                    <p><span>{{item.id}}</span>號</p>
                </div>
            </div>
        </div>
        <div class="explain" @click='explainShow' v-show='activityShow'>
            <div class="explain-content">
                <p>活動說明</p>
                <p>1.注冊用戶登錄后才能投票。若未注冊，請先完成雲網注冊。</p>
                <p>2.每一個賬號每天默認可投票3次，且當天只能投給不同的人，自己可給自己投票。</p>
                <p>3.每人每天的3票投完之后，可獲得額外的2張超級票，超級票可投給今日已投過的人。</p>
                <p> 4.最終解釋權歸『596雲網』所有。</p>
            </div>
        </div>
    </div>
</template>
<script>
import { Toast } from 'vant';
export default {
    data() {
        return {
            vote: {},
            newShow: 1,
            activityShow: false,
            arrListLeft: [],
            arrListRight: [],
            tableData: [],
            total: 0,
            pages: 0, //總共多少頁
            form: {
                keyword: '',
                orderBy: 'create_time'
            },
            pageNat: {
                current: 1, //第一頁
                size:6
            }
        }
    },
    created() {
        window.addEventListener('scroll', this.handleScroll, true); // 監聽（綁定）滾輪滾動事件
    },
    mounted() {
        this.getVoteSurplus()
        this.getTableData(1)
    },
    destroyed() {
        window.removeEventListener('scroll', this.handleScroll); //  離開頁面清除（移除）滾輪滾動事件
    },
    methods: {
        handleScroll() {
            //變量scrollTop是滾動條滾動時，距離頂部的距離
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //變量windowHeight是可視區的高度
            var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            //變量scrollHeight是滾動條的總高度
            var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            //滾動條到底部的條件
            if (scrollTop + windowHeight >= scrollHeight) {

                this.getTableData(this.pageNat.current + 1)
                console.log(1)

            } else {
                console.log(2)

            }
        },
        //獲取剩余票數
        getVoteSurplus() {
            this.axios.get(this.$API.voteSurplus).then((res) => {
                this.vote = res.data.data
                console.log(res)
            })
        },

        //查詢
        getTableData(current) {
            if (this.pages == 1) {
                return Toast.fail('加載完了');
            } else {
                Toast.loading({
                    message: '加載中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                    duration: 1000
                });
            }
            let self = this;
            for (var key in self.form) {
                if (self.form[key] === '') {
                    self.form[key] = null;
                }
            }
            let query = { queryCondition: self.form };
            query.current = current;
            query.size = self.pageNat.size;
            let arr = []
            self.axios.post(self.$API.voteList, query).then(res => {
                if (current == 1) {
                    self.pages = res.data.data.pages;
                } else {
                    self.pages = self.pages - 1
                }
                if (res.data.code == 0) {
                    self.total = res.data.data.total;
                    self.pageNat.current = res.data.data.current;
                    self.tableData = arr.concat(res.data.data.records);
                    this.getVoteList()
                } else {
                    Toast.fail(res.data.msg);
                    console.log(res.data.msg)
                }
            });
        },
        //初始化
        getVoteList() {
            let that = this
            // 獲取列表項外層容器，用來獲取該列總高度和添加子項。
            var item1 = document.querySelector('.item1');
            var item2 = document.querySelector('.item2');
            var arr = this.tableData

//靜態格式  arr=[
            {
                avatar:'圖片路徑',
                name:'名字',
                votes:'票數',
                id:'23',
            }，   {
                avatar:'圖片路徑',
                name:'名字',
                votes:'票數',
                id:'23',
            }，   {
                avatar:'圖片路徑',
                name:'名字',
                votes:'票數',
                id:'23',
            }，
            ]
            console.log(arr)
            arr.forEach((val) => { // 通過循環，動態添加數據
                new Promise((res, rej) => {
                        var img = new Image();
                        img.src = val.avatar;
                        img.width = 156
                        img.onload = function() { // 當圖片加載完畢，再執行then后面的代碼
                            res(img);
                        }
                    })
                    .then((img) => {
                        if (item1.offsetHeight <= item2.offsetHeight) { // 判斷高度最低一列，添加內容
                            // 往第一列添加列表項
                            that.arrListLeft.push(val)
                        } else {
                            // 往第二列添加列表項
                            that.arrListRight.push(val)

                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            });
        },
        //彈窗
        explainShow() {
            this.activityShow = !this.activityShow;
        },
        //數據拉取
        getVoteInfo(num) {
            this.tableData = []
            this.arrListLeft = []
            this.arrListRight = []
            this.pages = 0
            console.log(this.tableData)
            this.newShow = num
            if (num === 1) {
                this.form = {
                    keyword: '',
                    orderBy: 'create_time'
                }
                this.getTableData(1)
            } else if (num === 2) {
                this.form = {
                    keyword: '',
                    orderBy: 'votes'
                }
                this.getTableData(1)
            } else {
                this.form.orderBy = 'create_time'

                this.getTableData(1)
            }
        },
        //跳轉路徑
        getJump(id) {
            console.log(id)
            this.$router.push(`/voteMessage?id=${id}`)
        }
    }
}
</script>
<style scoped>
.vote {
    width: 100%;
    background-color: #fff;
    height: 100vh;
}

.vote-top {
    padding: 14px 6px;
}

.vote-top p:nth-child(2) {
    text-align: right;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}

.vote-top p:nth-child(2) span {
    background-color: #3554E3;
    opacity: .75;
    padding: 4px 10px;
    border-radius: 12px;
    margin-right: 6px;
}

.vote-today p {
    text-align: center;
    padding-bottom: 9px;
}

.vote-today p:nth-child(1) {
    color: #333;
    font-size: 18px;
    font-weight: 400;
}

.vote-today p:nth-child(2) {
    color: #333;
    font-size: 18px;
    font-weight: bold;
}

.vote-today p:nth-child(3) {
    width: 280px;
    margin: 22px auto;
    background-color: #E8E8E8;
    box-shadow: 0px 3px 2px rgba(86, 86, 86, 0.44);
    opacity: 0.6;
    border-radius: 19px;
    display: flex;
    justify-content: center;
    padding: 8px 0;
}

.vote-today p:nth-child(3) input {
    border: none;
    font-size: 15px;
    background-color: #E8E8E8;
    padding-right: 30px;
    opacity: 1;

}

/* WebKit browsers */
input::-webkit-input-placeholder {
    color: #333;
    font-size: 14px;
}

/* Mozilla Firefox 4 to 18 */
input:-moz-placeholder {
    color: #333;
    opacity: 1;
    font-size: 14px;
}

/* Mozilla Firefox 19+ */
input::-moz-placeholder {
    color: #333;
    opacity: 1;
    font-size: 14px;
}

/* Internet Explorer 10+ */
input:-ms-input-placeholder {
    color: #333;
    font-size: 14px;
}

.search {
    display: flex;
    justify-content: space-around;
    color: #666;
    font-size: 15px;
    font-weight: bold;
    padding: 20px 0;
}

.search p {
    position: relative;
}

.newText {
    color: #333;
}

.newImg {
    position: absolute;
    left: 10px;
    bottom: -8px;
}

.vote-content {
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 20px;
}

.content {
    background: #fff;
}

.content .list {
    box-shadow: 0px 3px 6px rgba(53, 84, 227, 0.3);
    border-radius: 17px;
    margin-bottom: 20px;
    position: relative;
}

.content .list p:nth-child(1) .van-image {
    border-top-right-radius: 17px;
    border-top-left-radius: 17px;
    overflow: hidden;
}

.content .list p:nth-child(2) {
    color: #333;
    font-size: 14px;
    font-weight: 500;
    padding: 10px;
    display: flex;
    justify-content: space-between;
}

.content .list p:nth-child(3) {
    text-align: center;
    padding-bottom: 10px;
}

.content .list p:nth-child(3) button {
    border: none;
    padding: 6px 20px;
    background: linear-gradient(85deg, rgba(93, 122, 255, 1) 0%, rgba(183, 128, 255, 1) 100%);
    border-radius: 17px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.content .list p:nth-child(4) {
    position: absolute;
    left: 0;
    top: 20px;
    width: 46px;
    height: 22px;
    background: url('../../assets/img/home/logo-3.png') no-repeat;
    background-size: 100%;
    font-size: 15px;
    font-family: Bahnschrift;
    color: #fff;
    text-align: center;

}

.explain {
    width: 100%;
    height: 100%;
    background: rgba(51, 51, 51, .5);
    position: fixed;
    top: 0;
}

.explain-content {
    width: 264px;
    height: 244px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -122px;
    margin-left: -130px;
    background-color: #fff;
    color: #666;
    font-size: 12px;
    border-radius: 17px;

}

.explain-content p {
    padding: 2px 20px;
}

.explain-content p:nth-child(1) {
    color: #333;
    padding: 20px;
    text-align: center;
}
</style>