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

    人生如戏,或实力或演技
  • 相关阅读:
    1113 Integer Set Partition
    1114 Family Property
    1115 Counting Nodes in a BST
    1116 Come on! Let's C
    Maven 常用命令
    Maven 快照
    Maven 插件
    Maven POM
    Maven 中央仓库
    Maven 依赖机制
  • 原文地址:https://www.cnblogs.com/yang0902/p/5698619.html
Copyright © 2011-2022 走看看