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

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

相关推荐

  • js实现数据双向绑定(访问器监听)

    本文实例为大家分享了js实现数据双向绑定的具体代码,供大家参考,具体内容如下 双向绑定: 双向绑定基于MVVM模型:model-view-viewModel model: 模型层,负责业务逻辑以及与数据库的交互 view:视图层,负责将数据模型与UI结合,展示到页面中 viewModel:视图模型层,作为model和view的通信桥梁 双向绑定的含义:当model数据发生变化的时候,会通知到view层,当用户修改了view层的数据的时候,会反映到模型层. 而双向数据绑定的好处在于:只关注于数据操

  • JS中可能会常用到的一些数据处理方法

    目录 DOM处理 数组 方法 总结 DOM处理 DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范.DOM就是由节点组成的. 检查一个元素是否被聚焦 const hasFocus = ele => (ele === document.activeElement); 检查用户是否滚动到页面底部 const isAtBottom = () => document.documentElement.clientHeight +

  • JavaScript的基础语法和数据类型详解

    目录 引入JavaScript 1.内部标签 2.外部引入 基础语法 数据类型 number 字符串 布尔值 逻辑运算 比较运算符 数组 对象 流程控制 Map和Set iterator 总结 引入JavaScript 1.内部标签 <script> alert("hello world"); </script> 2.外部引入 <script src="js/abc.js"></script> 基础语法 定义变量 &l

  • 超详细的JavaScript基本语法规则

    目录 01 JavaScript (简称:js) js分三个部分: JavaScript是什么? js的代码可以分三个地方写: 02 操作符 操作符:一些符号-----用来计算 关系运算符: 关系运算表达式: 逻辑运算符: 逻辑运算表达式: 03 JS变量 变量名的注意问题-变量名的命名: 04 JS变量作用 05 JS变量的交换 使用第三方的变量进行交换 第二种方式交换:一般适用于数字的交换 06 注释 注释的方式: 07 JS的数据类型 值类型(基本类型): 引用数据类型: 08 JS的数字

  • Javascript中的解构赋值语法详解

    前言 首先在 ES6中引入的"解构赋值语法"允许把数组和对象中的值插入到不同的变量中.虽然看上去可能很难,但实际上很容易学习和使用. 解构赋值语法是一种 JS表达式.ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量. 在ES6解构赋值出现之前,我们需要为变量赋值的时候,只能直接指定值. 比如: let a = 1; let b = 2; let c = 3; let d = 4; let e

  • js基础语法与maven项目配置教程案例

    目录 一,js的语句 二,js的数组 三,js的函数 四,Maven 五.总结 一,js的语句 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 js的语句</title> <!-- 在HTML里嵌入js代码 --> <script> // 2. 循环结构 //练习3:在控制台输出结果,输出1亿每天花一半能花多少天,

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

    本文实例为大家分享了js实现瀑布流触底动态加载数据的具体代码,供大家参考,具体内容如下 // onScrollEvent 滚动条事件 <div class="box" ref="box" @mousewheel="onScrollEvent"> //每一个方块内的内容start <div class="boxItemStyle" v-for="(userTag, i) in dataSource&q

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

    本文实例为大家分享了js实现动态加载数据瀑布流的具体代码,供大家参考,具体内容如下 实现的功能 1.每次下拉到底部会自动加载下一页的数据2.图片逐渐显示 首先html <!DOCTYPE html> <html lang="zh-CN">     <head>         <meta charset="UTF-8" />         <meta name="viewport" cont

  • js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据  都可以 别忘了引用jquery类库 $(window).scroll(functi

  • javascript瀑布流式图片懒加载实例解析与优化

    之前写过一版图片"懒加载"的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方. 这篇文章主要就是结合上篇<javascript瀑布流式图片懒加载实例>再来看看图片"懒加载"的一些知识. 图片"懒加载"的主旨: 按照需要加载图片,也就是说需要显示的时候再加载图片显示,减少一次性加载的网络带宽开销. 先来看一段代码: var conf = { 'loadfirst': true, 'loadimg': t

  • PHP+jQuery实现滚屏无刷新动态加载数据功能详解

    本文实例讲述了PHP+jQuery实现滚屏无刷新动态加载数据功能.分享给大家供大家参考,具体如下: index.php <?php require_once('connect.php'); //连接数据库 $user = array('demo1','demo2','demo3','demo3','<de></de>mo4'); //模拟了几个用户 ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

  • AJAX和jQuery动态加载数据的实现方法

    什么是AJAX? 这里的AJAX不是希腊神话里的英雄,也不是清洁剂品牌,更不是一门语言,而是指异步Javascript和XML(Asynchronous JavaScript And XML),这里的XML(数据格式)也可以是纯文本(Plain Text)或是JSON.简单的说,就是使用XMLHttpRequest对象和服务器端交换数据(以XML或是JSON等格式),使用JavaScript处理数据并更新页面内容. 为什么要使用AJAX? 借助AJAX,我们可以实现: 在不重载页面的情况下,向服

  • iscroll动态加载数据完美解决方法

    本文实例为大家分享了iscroll动态加载数据的具体代码,供大家参考,具体内容如下 <div id="wrapper" class="margin-b90"> <div id="scroller"> <div id="pullDown"> <span class="pullDownLabel" style="text-align: center;"

  • swiper 解决动态加载数据滑动失效的问题

    两种解决方法 1.数据加载后进行swiper初始化 success:function(result){ var resultdata =eval("("+result+")"); if(resultdata.status == 1){ var dataList = resultdata.data; currentPage = resultdata.currentPage; pageCount = resultdata.pageCount; var html = &q

  • Bootstrap treeview实现动态加载数据并添加快捷搜索功能

    写在前面: jQuery多级列表树插件基于Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等. 实用Bootstrap树形菜单特效插件Bootstrap Tree View,非常不错的Bootstrap插件,现在很多Bootstrap制作的页面都需要此功能,此插件需要Bootstrap3版本以及jQuery 2.0极以上版本支持,支持众多参数自定义功能,颜色.背景色.图标.链接等,还是很不错的. 具体效果请暂时移步: http://jonmiles.github.io

  • javascript操作向表格中动态加载数据

    本文实例为大家分享了javascript实现向表格中动态加载数据的具体代码,供大家参考,具体内容如下 首先在HTML中编写表格信息 <table width="500px" border="1"> //表格头部信息 <thead> <tr> <th>编号</th> <th>姓名</th> <th>身份</th> <th>操作</th>

随机推荐