等寬瀑布流

js

(function(){

    /*全局變量*/
    var $_warp=$(".layout");
    var $_win=$(window);

    //初始化 流塊
    window.init=function(){
        var boxs=new Array();
            $.ajax({
                url:"index.json",
                async:false,
                type:"post",
                dataType:"json",
                success:function(meg){
                    var data=meg.data;
                    var len=data.length;
                    for(var i=0;i<len;i++){
                        var src=data[i].src;
                        var $_div=$("<div></div>");
                        $_div.addClass("b_box");
                        var _a=("<a href='javascript:void(0)'><img src='"+src+"'></a>");
                        $_div.append(_a);
                        $_warp.append($_div);
                        boxs.push({
                            "id":"box_"+i,
                            "width":$_div.width(),
                            "height":$_div.height(),
                            "relWidth":$_div.width(),
                            "relHeight":$_div.height(),
                            "src":src
                        })
                        $_div.remove();
                    }
                }
            })
        return boxs;
    }
    function bgColor(){
        var r=Math.floor(Math.random()*255);
        var g=Math.floor(Math.random()*255);
        var b=Math.floor(Math.random()*255);
        return r+","+g+","+b;
    }


    // 單元格對象
    var Box=function(){
        this._margin=15;
        this.b_width=240
        var data=new Array();


        var _w_width=$_warp.width();
        this.b_count=Math.floor(_w_width/(this.b_width+0));


        this.site=[
            {x:0,y:0}
        ]
        //初始化第一行 座標
        this.init=function(){
            for(var i=0;i<this.b_count;i++){
                this.site[i]={x:this.b_width*i+i*this._margin,y:0}
            }
        }
        //單元格對象 加載數據
        this.loadData=function(_data){
            for(var i=0;i<_data.length;i++){
                data.push(_data[i]);
            }
            return this.updateSite(_data);
        }
        //更新單元格 座標
        this.updateSite=function(_data){
            for(var i=0;i<_data.length;i++){
                var item=_data[i];
                item=site(this,item);
                _data[i]=item;
            }
            return _data;
        }
    }
    //計算單元格 座標
    var site=function(_box,_item){
        var relWidth=_item.relWidth,
            relHeight=_item.relHeight
        var b_count=_box.b_count,
            b_width=_box.b_width,
            _margin=_box._margin

        if(b_width>=relWidth){
            var low=0;
            var pos='';
            for(var i=1;i<b_count;i++){
                if(_box.site[i].y<_box.site[low].y){
                    low=i
                }
            }
            _item.pos=site_to_b(_box,low,_item.height,i);
            return _item;
        }
        function site_to_b(_box,i,height,j){
            var pos={x:_box.site[i].x,y:_box.site[i].y}
            _box.site[i].y+=(height*1+_margin)
            return pos;
        }

    }

    function appendDom(_data){
        for(var i=0;i<_data.length;i++){
            var item=_data[i];
            var $_div=$("<div></div>");
            $_div.attr("id","b_"+i).addClass("b_box");
            var _a=("<a href='javascript:void(0)'><img src='"+item.src+"'></a>");
            $_div.append(_a)
            $_div.css({
                position:"absolute",
                width:item.width,
                height:item.height,
                left:item.pos.x,
                top:item.pos.y
            })
            $(".layout").append($_div);
        }
        lock=true
    }
    var b;
    $(document).ready(function(){
        var boxs=window.init();
        b=new Box();
        b.init();
        appendDom(b.loadData(boxs));
    });
    var dir=0;
    var lock=true;
    $_win.bind("scroll",function(){
        var d_hei=$(document).height();
        var b_top=$(document).scrollTop();
        var w_h=$(this).height();

        if(b_top>dir){
            dir=b_top;
            if(d_hei-(b_top+w_h)<50){
                if(!lock){
                    return
                }
                lock=false
                var boxs=window.init();
                appendDom(b.loadData(boxs))
            }
        }else{
            dir=b_top
        }
    })

}());

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>瀑布流</title>
    <script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
    <link type="text/css" rel="stylesheet" href="../css/css.css">
</head>
<body>

    <div class="layout"></div>

<script type="text/javascript" src="../js/waterFall.js"></script>
</body>
</html>