瀑布流效果

我相信每天都做一点对学习是肯定有帮助的，不管它是简单还是难的，今天可能比较懒，没有去做很多的学习上的事情，就下午的时候静下心来学习巩固自己，现在很多人都在模仿着做网上很多大型网站的瀑布流的效果，我也就跟随潮流。。。现在的瀑布流有两个实现的派别，我称之为浮动流和定位流！不分哪个好坏，我纯粹是个人的爱好使我向着浮动流的。。。又去淘宝上抓了点图。。。呵呵，不会收我版权费的吧！代码奉上:

<script>
<!--
    //于fgm.cc的调用函数，省事
    var get = {
        byId: function(id) {
            return typeof id === "string" ? document.getElementById(id) : id
        },
        byClass: function(sClass, oParent) {
            var aClass = [];
            var reClass = new RegExp("(^| )" + sClass + "( |$)");
            var aElem = this.byTagName("*", oParent);
            for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
            return aClass
        },
        byTagName: function(elem, obj) {
            return (obj || document).getElementsByTagName(elem)
        }
    };
    //随机数
    function randomnum(numMin, numMax) {
        return Math.floor(Math.random() * numMax) + numMin;
    };
    //生成单个图片层
    function forImg()
    {
        var resultdiv=document.createElement("div");
        resultdiv.className="result_item";
        var ran=randomnum(1,16);
        var resultimg=document.createElement("img");
        resultimg.src="img/wow"+ran+".jpg";
        resultdiv.appendChild(resultimg);
        return resultdiv;
    }
    //生成图片板块
    function loadimg(imgcount,element){
        for(var i=1;i<=imgcount;i++)
        {
            var num=i%4;
            switch(num)
            {
                case 1: { element[0].appendChild(forImg());break;}
                case 2: { element[1].appendChild(forImg());break;}
                case 3: { element[2].appendChild(forImg());break;}
                case 0: { element[3].appendChild(forImg());break;}
            }    
        }
    }
    window.onload=function(){
        var list=get.byId("list");
        var li=get.byClass("list_item",list);
        var loading=get.byId("loading");
        var isTop=true;//防止事件多次执行
        loadimg(16,li);
        window.onscroll=function(){
            if(isTop)
            {
                var allheigth=document.documentElement.scrollTop==0?document.body.scrollTop:document.documentElement.scrollTop;
                var heigth=document.documentElement.scrollHeight-document.documentElement.clientHeight-allheigth;
                if(heigth==0)
                {
                    isTop=false;
                    setTimeout(function(){
                        loadimg(4,li);
                        loading.style.top=document.documentElement.scrollHeight+"px";
                        loading.style.display="block";
                        isTop=true;
                    },1000);
                }
            }
        }
    }
-->
</script>

然后国际惯例：demo地址：

http://www.cowll.com/demo/wowtaobao.html

可能还有纰漏，还不完善，我会尽力去完善它的！