瀑布流

瀑布流:
                        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();
                                            }
                                        }
                                    }