js实现瀑布流效果(自动生成新的内容)


Posted in Javascript onMarch 16, 2017

当滚动条接近底部会自动生成新的内容(色块)

效果图:

js实现瀑布流效果(自动生成新的内容)

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{list-style: none;}
    div{overflow: hidden;}
    ul{float: left;}
    li{width:300px; margin-bottom:10px;}
  </style>
  <script>
    function rnd(n,m){
      return parseInt(Math.random()*(m-n))+n;
    }
    function cl(){
      var li = document.createElement('li');
      li.style.height=rnd(100,500)+'px';
      li.style.background='rgb('+rnd(0,255)+','+rnd(0,255)+','+rnd(0,255)+')';
      return li;
    }
    window.onload=function(){
      var aUl = document.getElementsByTagName('ul');
      //alert(aUl.length);
      function c20(){
        for(var i =0;i<20;i++){
          var arr =[];
          for(var j=0;j<aUl.length;j++){
            arr.push(aUl[j])
          }
          arr.sort(function(n,m){
            return n.offsetHeight- m.offsetHeight
          });
          arr[0].appendChild(cl());
        }
      }
      c20();
      window.onscroll=function(){
        var arr = [];
        for (var j = 0; j < aUl.length; j++) {
          arr.push(aUl[j])
        }
        arr.sort(function (n, m) {
          return n.offsetHeight - m.offsetHeight
        });
        var n = (document.body.scrollTop || document.documentElement.scrollTop) + document.documentElement.clientHeight;
        if (n > arr[0].offsetHeight) {
          c20()
        }
      }
    }
  </script>
</head>
<body>
<div>
  <ul></ul>
  <ul></ul>
  <ul></ul>
</div>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
es6的数字处理的方法(5个)
Mar 16 #Javascript
Webpack打包慢问题的完美解决方法
Mar 16 #Javascript
div中文字内容溢出常见的解决方法
Mar 16 #Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 #Javascript
原生js更改css样式的两种方式
Mar 15 #Javascript
js清除浏览器缓存的几种方法
Mar 15 #Javascript
从零开始做一个pagination分页组件
Mar 15 #Javascript
You might like
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
apache rewrite_module模块使用教程
2008/01/10 PHP
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
Script的加载方法小结
2011/01/12 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
2013/12/08 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
js中作用域的实例解析
2017/03/16 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
简单了解Django模板的使用
2017/12/20 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
人力资源部培训专员岗位职责
2014/01/02 职场文书
纪念建党演讲稿范文
2014/01/13 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
寒假安全保证书
2015/02/28 职场文书
环保主题班会教案
2015/08/13 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python