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 相关文章推荐
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
vue.js的安装方法
May 12 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
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数据库操作分页类
2008/06/04 PHP
php数组总结篇(一)
2008/09/30 PHP
详谈PHP编码转换问题
2015/07/28 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
php中this关键字用法分析
2016/12/07 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
原生JS实现微信通讯录
2020/06/18 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
彻底理解Python list切片原理
2017/10/27 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
python dict 相同key 合并value的实例
2019/01/21 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
入党申请人的自我鉴定
2013/12/01 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
Spring整合Mybatis的全过程
2021/06/28 Java/Android