相思资源网 Design By www.200059.com

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

效果图:

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>

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

标签:
js,实现瀑布流,js瀑布流效果,js实现图片瀑布流

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

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

暂无js实现瀑布流效果(自动生成新的内容)的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?