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 相关文章推荐
批量实现面向对象的实例代码
Jul 01 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
js实现省市级联效果分享
Aug 10 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 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
基于PHP+MySQL的聊天室设计
2006/10/09 PHP
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
javascript 框架小结 个人工作经验
2009/06/13 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
原生JS轮播图插件
2017/02/09 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python抓取网页图片并放到指定文件夹
2014/04/24 Python
python用来获得图片exif信息的库实例分析
2015/03/16 Python
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
Python理解递归的方法总结
2019/01/28 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
Linux机考试题
2015/10/16 面试题
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
科研课题实施方案
2014/03/18 职场文书
幼儿园的门卫岗位职责
2014/04/10 职场文书
python如何利用traceback获取详细的异常信息
2021/06/05 Python
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS