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

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

js实现瀑布流触底动态加载数据的更多相关文章

  1. html5 拖拽及用 js 实现拖拽功能的示例代码

    这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. HTML5 canvas 瀑布流文字效果的示例代码

    这篇文章主要介绍了HTML5 canvas 瀑布流文字效果的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. 小程序瀑布流解决左右两边高度差距过大的问题

    这篇文章主要介绍了小程序瀑布流解决左右两边高度差距过大的问题的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  5. 3种方式实现瀑布流布局小结

    这篇文章主要介绍了3种方式实现瀑布流布局小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  6. swift皮筋弹动发射飞机ios源码

    这是一个款采用swift实现的皮筋弹动发射飞机游戏源码,游戏源码比较详细,大家可以研究学习一下吧。

  7. Swift:用UICollectionView整一个瀑布流

    除了以上说到的内容之外,collectionview还有一个专门处理布局的UICollectionViewLayout。苹果给了一个基础的布局UICollectionViewFlowLayout,可以实现一个基本的流式布局。直接干掉,拖一个UICollectionViewController进去并设置为默认的Controller。之后在interfacebuilder中把collectionview的类设置为HomeCollectionViewController。接下来再次回到collectionvie

  8. Swift UITableView瀑布流/NSURLConnection异步网络请求

    去年写过一个OC版本的瀑布流Demo《UITableView实现的瀑布流效果》。接触Swift一段时间了,今天就是用Swift再写了一个瀑布流的Demo。原理是一样的这里不再赘述。在写这个Demo的过程中是用到了NSURLConnection的异步网络请求和GCD做了一个图片的异步加载,没有做图片的缓存,所以是用起来有些卡。cell是带左滑删除视图的,删除功能是没有实现的。O(∩_∩)O哈哈~

  9. Swift与Js通过WebView交互

    开发环境:Swfit2.3XCode8.2基础概念jscontext,jscontext是代表JS的执行环境,通过-evaluateScript:方法就可以执行一JS代码JSValue,JSValue封装了JS与ObjC中的对应的类型,以及调用JS的API等JSExport,JSExport是一个协议,遵守此协议,就可以定义我们自己的协议,在协议中声明的API都会在JS中暴露出来,才能调用Swif

  10. JSCore swift

    如果双方相互引用,会造成循环引用,而导致内存泄露。以上是Jscore的基本使用,比较简单

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部