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();
                                                }
                                            }
                                        }

    人生如戏,或实力或演技
  • 相关阅读:
    浅谈桶排思想及[USACO08DEC]Patting Heads 题解
    【知识总结】CSS中样式覆盖优先顺序
    【知识总结】Activiti工作流学习入门
    mac下安装nginx问题解决
    spring项目中dubbo相关的配置文件出现红叉的问题
    mybatis对java自定义注解的使用——入门篇
    自学spring过程中碰到的问题list,一个一个解决
    mac下常用软件整理
    小米面试题目(测试开发岗位——不是测试,是测试工具和平台的开发岗位)
    Knockoutjs:Component and Custom Elements(翻译文章)
  • 原文地址:https://www.cnblogs.com/yang0902/p/5698619.html
Copyright © 2011-2022 走看看