zoukankan      html  css  js  c++  java
  • 瀑布流

    瀑布流:
                            1.等宽不等高;
                            2.拉不到底;
                            每次往offsetHeight最小的Ul里面添加


                                        function rand(n,m){
                                            return parseInt(Math.random()*(m-n)+n)   //随机数
                                            }
                                        function createLi(){
                                                 var oLi=document.createElement('li');
                                                 oLi.style.height=rand(50,300)+'px';   //li在50-300px之间
                                                 var r=rand(0,256);
                                                 var g=rand(0,256);
                                                 var b=rand(0,256);
                                                 oLi.style.background='rgb('+r+','+g+','+b+')';
                                            
                                                 return oLi;                      //返回oLi
                                        }
                                        window.onload=function(){
                                            var oBox=document.getElementById("box");
                                            var aUl=oBox.children;
                                            function createLi40(){   
                                                for(var i=0;i<40;i++){   //用于创建40个li
                                                            var arrUl=[];
                                                            for(var j=0;j<aUl.length;j++){  //数组可以比较大小
                                                                        arrUl[j]=aUl[j];
                                                    }
                                                    arrUl.sort(function(n1,n2){     //数组升序
                                                            return n1.offsetHeight-n2.offsetHeight;
                                                    })
                                                    var aLi=createLi();
                                                    arrUl[0].appendChild(aLi);     //把ali插到最小的那个数组中
                                                }
                                            }
                                            createLi40();
                                            window.onscroll=window.onresize=function(){
                                                            var scrollT=document.documentElement.scrollTop||document.body.scrollTop;
                                                            var clientH=document.documentElement.clientHeight;
                                                if(oBox.scrollHeight-300<=scrollT+clientH){    //提前加载
                                                            createLi40();
                                                }
                                            }
                                        }

    人生如戏,或实力或演技
  • 相关阅读:
    Notepad++如何对比文件 Notepad++对比两个文件代码方法
    如何识别图片中的文字
    如何用DOS命令查看占用某端口的程序及PID号
    java使用POI获取sheet、行数、列数
    程序中的.htaccess文件是做什么的
    阿里云服务器配置https(总结)
    legend3---19、要更多的从服务器端控制元素的显示和隐藏,而不要是页面端
    Laravel 中 Session 的使用问题(dd()导致laravel中session取值问题)
    legend3---lamp.sh常用操作
    阿里云服务器发送邮件:Connection could not be established with host smtp.qq.com [Connection timed out #110]
  • 原文地址:https://www.cnblogs.com/yang0902/p/5698619.html
Copyright © 2011-2022 走看看