基于JavaScript实现无限加载瀑布流


Posted in Javascript onJuly 21, 2017

本文实例为大家分享了JS实现无限加载瀑布流展示的具体代码,供大家参考,具体内容如下

1.在外层的div中,插入4个ul,ul左浮动
2.每次在创建节点之后,插入节点之前,要获取每个ul的高度,找到最小的高度,然后将新创建的li节点插入该ul中
3.当文档的高度 - 文档的可视高度 <= 鼠标的滑动距离时 开始继续创建节点

代码:

<!DOCTYPE html> 
<html> 
 
  <head> 
    <meta charset="UTF-8"> 
    <title>瀑布流效果动态加载</title> 
    <style type="text/css"> 
      * { 
        margin: 0; 
        padding: 0; 
      } 
       
      #content { 
        width: 1000px; 
        border: 3px solid red; 
        margin: 0 auto; 
        overflow: hidden; 
      } 
       
      #content > ul { 
        width: 240px; 
        padding: 4px; 
        border: 1px solid blue; 
        float: left; 
        list-style-type: none; 
      } 
       
      #content > ul > li { 
        background-color: yellow; 
        font-size: 100px; 
        color: white; 
        text-align: center; 
        margin-bottom: 5px; 
      } 
    </style> 
  </head> 
 
  <body> 
    <div id="content"> 
      <ul></ul> 
      <ul></ul> 
      <ul></ul> 
      <ul></ul> 
    </div> 
  </body> 
  <script type="text/javascript"> 
    //随机[m,n]之间的整数 
    function randomNumber(m, n) { 
      return Math.floor(Math.random() * (n - m + 1) + m); 
    } 
    //随机颜色 
    function randomColor() { 
      return "rgb(" + randomNumber(0, 255) + "," + randomNumber(0, 255) + "," + randomNumber(0, 255) + ")"; 
    } 
    //获取当前的scrollTop 
    var scrollTopDistance; 
    //获取所有的ul 
    var uls = document.getElementsByTagName("ul"); 
    var i = 0; 
    var k = i; 
    function waterFall(){ 
      for (i = k;i < k + 4;i++) { 
        //创建li 
        var li = document.createElement("li"); 
        //随机颜色 
        li.style.backgroundColor = randomColor(); 
        //随机高度 
        li.style.height = randomNumber(150, 500) + "px"; 
        //手动转换为字符串 
        li.innerHTML = i + 1 + ""; 
        //插入到对应的ul中 
        //判断哪个ul的高度低,该次创建的li就插入到此ul中 
        var index = 0; //记录下标 
        for (var j = 0; j < uls.length; j++) { 
          if (uls[j].offsetHeight < uls[index].offsetHeight) { 
            index = j; 
          } 
        } 
        //将元素节点插入文档中 
        uls[index].appendChild(li); 
      } 
      k = i; 
      return uls[index].offsetHeight; 
    } 
    waterFall(); 
    var height; 
    //无限加载瀑布流方法,核心思想就是 
    document.onmousewheel = function(){ 
      //文档的高度 - 文档的可视高度 < 鼠标的滑动距离 时开始加载图片 
      height = document.body.clientHeight - document.documentElement.clientHeight; 
      if(height <= document.body.scrollTop){ 
        waterFall(); 
      } 
    } 
  </script> 
</html>

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

Javascript 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
javascript的几种写法总结
Sep 30 Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 Javascript
原生JS实现自定义滚动条效果
Oct 27 #Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 #Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 #Javascript
详解vue 模版组件的三种用法
Jul 21 #Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 #Javascript
vue-resource调用promise取数据方式详解
Jul 21 #Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 #Javascript
You might like
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
python如何将两个txt文件内容合并
2019/10/18 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
质量主管工作职责
2014/09/26 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
检讨书范文1000字
2015/01/28 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
Vue和Flask通信的实现
2021/05/19 Vue.js
Javascript之datagrid查询详解
2021/09/15 Javascript
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL