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 相关文章推荐
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
js 蒙版进度条(结合图片)
Mar 10 Javascript
ajax与302响应代码测试
Oct 23 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
vue项目前端错误收集之sentry教程详解
May 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开发文件系统实例讲解
2006/10/09 PHP
无数据库的详细域名查询程序PHP版(2)
2006/10/09 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
让你的网站可编辑的实现js代码
2009/10/19 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
JS与C#编码解码
2013/12/03 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
canvas的神奇用法
2017/02/03 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
Python中encode()方法的使用简介
2015/05/18 Python
Django中url的反向查询的方法
2018/03/14 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
Python绘图实现显示中文
2019/12/04 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
美国NBA官方商店:NBA Store
2019/04/12 全球购物
五四青年节优秀演讲稿范文
2014/05/28 职场文书
优秀教师推荐材料
2014/12/16 职场文书
水电工程师岗位职责
2015/02/13 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
一般纳税人申请报告
2015/05/18 职场文书