图片载入瀑布流效果

一、瀑布流布局 HTML+CSS

　　1、浮动布局或固定列布局

　　　　列数固定，将数据插入到每一列中

　　　　这种方式简单适用，先按照列数把布局固定好，然后在滚动事件中分别在每一列插入相应的数据既可

　

 

　　2、定位布局

　　　　通过将每个模块用浮动float:left;的布局方式

 

二、瀑布流Js实现和原理

 

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

<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

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

任何时候对自己认定的作品要精益求精；你不是程序员也不是设计师，你所做的事情是让浏览器成为你的舞台，让网页成为你道具，打开你的网页就是你的观众，这场戏刚刚上演！