• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了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++
      }
    },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
关于Vue代码可读性的几点建议发布时间:2022-02-05
下一篇:
uni-app实现NFC读取功能发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap