基于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 相关文章推荐
javascript编程起步(第四课)
Jan 10 Javascript
JavaScript 学习点滴记录
Apr 24 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
vue 中filter的多种用法
Apr 26 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
详解python调度框架APScheduler使用
2017/03/28 Python
用pycharm开发django项目示例代码
2019/06/13 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
房地产出纳岗位职责
2013/12/01 职场文书
销售经理工作职责
2014/02/03 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
千万级用户系统SQL调优实战分享
2022/03/03 MySQL
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL