js实现瀑布流触底动态加载数据

// onScrollEvent 滚动条事件<div class="box" ref="box" @mousewheel="onScrollEvent">    //每一个方块内的内容start      <div class="boxItemStyle" v-for="(userTag, i) in dataSource" :key="i" ref="boxItemStyle">        <a-tag class="moreStyle" @click="more(userTag.primaryParam)"> 更多></a-tag>        <div v-for="item in userTag.userTag" :key="item.code">          <p>            <span style="text-align: left"> {{ item.name }}:</span>            <span style="text-align: right">{{ item.value }}</span>          </p>        </div>      </div>      //每一个方块内的内容end</div>

waterFall () {  //减去边距的宽度      var pageWidth = this.$refs.box.offsetWidth - 200      var columns = 4; //定义一行4列      var itemWidth = parseInt(pageWidth / columns);      var arr = [];      var nodes = document.getElementsByClassName("boxItemStyle")      setTimeout(() => {        //var node1 = Array.from(nodes)       // var node2 = Array.prototype.slice.call(nodes)        for (var i = 0; i < nodes.length; i++) {          nodes[i].style.width = itemWidth + "px"          if (i < columns) {            nodes[i].style.width = itemWidth + "px"            nodes[i].style.left = itemWidth * i + i * 50 + "px"            nodes[i].style.top = 0            arr.push(nodes[i].offsetHeight);          } else {            // 找到数组中最小高度  和 它的索引            var minHeight = arr[0];            var index = 0;            for (var j = 0; j < arr.length; j++) {              if (minHeight > arr[j]) {                minHeight = arr[j];                index = j;              }            }            nodes[i].style.top = arr[index] + 30 + "px",              nodes[i].style.left = nodes[index].offsetLeft + 'px';            //  修改最小列的高度            // 最小列的高度 = 当前自己的高度 + 拼接过来的高度            arr[index] = arr[index] + nodes[i].offsetHeight + 30;//设置30的距离          }        }      }, 1000)    },

onScrollEvent () {      if (        this.isScroll &&        this.$refs.box.scrollHeight - this.$refs.box.scrollTop -this.$refs.box.clientHeight <= 0      ) {        this.loading = true        if (this.ipagination.current == 1) {          this.ipagination.current += 1        }        let param = {}        param['pageNo'] = this.ipagination.current        param['pageSize'] = this.ipagination.pageSize        param['portraitId'] = this.portraitId        postAction(this.url.list, { ...param }).then((res) => {          this.loading = false          if (res.success) {            this.isScroll = res.records            this.dataSource = this.dataSource.concat(res.result.records || res.result)            this.waterFall();          }        })        this.ipagination.current++      }    },