vue 使用js寫的瀑布流展示圖片，滾動(dòng)的時(shí)候?qū)е碌谝粡垐D片重疊，先展示，后計(jì)算圖片顯示？

<template>
    <div id="box">
         <div class="item" v-for='list in ceoPhoto'>
             <img :src="list.picUrl" alt="">
         </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
      name: 'Ceo',
      data () {
        return {
            pullRefreshss:true,
            ceoPhoto:[
                  {
                      'picUrl':'../../../static/image/demo/1.jpg'
                  },{
                      'picUrl':'../../../static/image/demo/2.jpg'
                  },{
                      'picUrl':'../../../static/image/demo/3.jpg'
                  },{
                      'picUrl':'../../../static/image/demo/4.jpg'
                  },{
                      'picUrl':'../../../static/image/demo/5.jpg'
                  },{
                      'picUrl':'../../../static/image/demo/6.jpg'
                  },{
                      'picUrl':'../../../static/image/demo/7.jpg'
                  },{
                      'picUrl':'../../../static/image/demo/8.jpg'
                  },{
                      'picUrl':'../../../static/image/demo/9.jpg'
                  },{
                      'picUrl':'../../../static/image/demo/10.jpg'
                  },{
                      'picUrl':'../../../static/image/demo/11.jpg'
                  }
            ],
            ceoPhotoS:[
                  {
                      'picUrl':'../../../static/image/demo/12.jpg'
                  },{
                      'picUrl':'../../../static/image/demo/13.jpg'
                  },{
                      'picUrl':'../../../static/image/demo/14.jpg'
                  },{
                      'picUrl':'../../../static/image/demo/15.jpg'
                  },{
                      'picUrl':'../../../static/image/demo/16.jpg'
                  },{
                      'picUrl':'../../../static/image/demo/17.jpg'
                  },{
                      'picUrl':'../../../static/image/demo/18.jpg'
                  },{
                      'picUrl':'../../../static/image/demo/19.jpg'
                  },{
                      'picUrl':'../../../static/image/demo/20.jpg'
                  }
            ]
        }
      },
      created () {

      },
      watch: {},
      mounted(){
          this.init();
    },
    methods:{
        init(){
            this.waterFall();
            this.pullRefresh();
        },
        waterFall(){
            var box = document.getElementById('box');
            var items = box.children;
            // 定義每一列之間的間隙 為10像素
            var gap = 10;
             // 1- 確定列數(shù)  = 頁面的寬度 / 圖片的寬度
            var pageWidth = this.getClient().width;
            var itemWidth = items[0].offsetWidth;
            var columns = parseInt(pageWidth / (itemWidth + gap));
            var arr = [];
            for (var i = 0; i < items.length; i++) {
                if (i < columns) {
                    // 2- 確定第一行
                    items[i].style.top = 0;
                    items[i].style.left = (itemWidth + gap) * i + 'px';
                    arr.push(items[i].offsetHeight);
                } else {
                    // 其他行
                    // 3- 找到數(shù)組中最小高度  和 它的索引
                    var minHeight = arr[0];
                    var index = 0;
                    for (var j = 0; j < arr.length; j++) {
                        if (minHeight > arr[j]) {
                            minHeight = arr[j];
                            index = j;
                        }
                    }
                    // 4- 設(shè)置下一行的第一個(gè)盒子位置
                    // top值就是最小列的高度 + gap
                    items[i].style.top = arr[index] + gap + 'px';
                    // left值就是最小列距離左邊的距離
                    items[i].style.left = items[index].offsetLeft + 'px';
                    // 5- 修改最小列的高度 
                    // 最小列的高度 = 當(dāng)前自己的高度 + 拼接過來的高度 + 間隙的高度
                    arr[index] = arr[index] + items[i].offsetHeight + gap;
                }
            }
            this.pullRefreshss = true;
        },
        getClient(){
            return {
                width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
                height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
            }
        },
        //獲取文檔總高度
        getScrollTop(){
            var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
            if (document.body) {
                bodyScrollTop = document.body.scrollTop;
            }
            if (document.documentElement) {
                documentScrollTop = document.documentElement.scrollTop;
            }
            scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
            return scrollTop;
        },
        //瀏覽器視口高度
        getScrollHeight(){
            var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
            if (document.body) {
                bodyScrollHeight = document.body.scrollHeight;
            }
            if (document.documentElement) {
                documentScrollHeight = document.documentElement.scrollHeight;
            }
            scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
            return scrollHeight;
        },
        //瀏覽器視口的高度
        getWindowHeight(){
             var windowHeight = 0;
            if (document.compatMode == "CSS1Compat") {
                windowHeight = document.documentElement.clientHeight;
            } else {
                windowHeight = document.body.clientHeight;
            }
            return windowHeight;
        },
        pullRefresh(){
            var _this = this;
            $(window).scroll(function () {
                _this.scrollChange();
                let scrollTop = $(this).scrollTop();
                if(scrollTop>=50){
                    _this.scrollTop = true;
                }else{
                    _this.scrollTop = false;
                }
            })
        },
        scrollChange(){
            this.scollY = this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight();
            // 把下拉刷新置為false，防止多次請(qǐng)求
            if(this.scollY >= -50){
                if(!this.pullRefreshss){
                    return false;
                }
                this.initpush();
                
            }else{
                this.pullRefreshss = true;
            }
        },
        initpush(){
            this.pullRefreshss = false;
            for(var i = 0 ; i<this.ceoPhotoS.length;i++){
                this.ceoPhoto.push(this.ceoPhotoS[i]);
            }
            this.waterFall();
        }
    }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
    margin: 0;
    padding: 0;
    position: relative;
}
img {
    width: 220px;
    display: block;
}
.item {
    box-shadow: 2px 2px 2px #999;
    position: absolute;
}
</style>

顯示出來的效果：

再次請(qǐng)求時(shí)蓋住了第一個(gè)圖片,因?yàn)榻壎▎栴}求解決：