JS_waterfall[说给自己听]

DEMO

1.前言:
　　瀑布流的难点
　　　　1：数组的操作；
　　　　2：图片的高度；
　　　　

2.GO：

/*
 * 代码很短,所以功能只有布局;
 * 但是核心就在这儿了.
 */
$.ui.waterfall = $.Class.creat();
$.ui.waterfall.prototype = {
    init:function(){
        this.opat = {
            id:document,
            node:null,
            row:1
            };
        $.Object.extend(this.opat,arguments[0]||{});
        this.fire();
    },
    fire:function(){
        var _this = this,_opat = _this.opat;
        var _id = $(_opat.id);
        var _lis = _this._lis = _id.find(_opat.node);
        var _width = _lis.outerWidth();
        var _row = _opat.row;
　　　　 /*
 　　　　　这个数组就是我们后面要操作的数组；
　　　　　*/
        var _arr = [];
        _lis.each(function(i,o){
            if(_arr.length < _row){
　　　　　　　　　 /*
　　　　　　　　　　* 启示的时候是没有别的内容所以[top]值都为0，也不需要考虑别的只要顺的排过来就OK了
　　　　　　　　　　*/
                $(this).css({left:(i%_row)*_width+"px"});
　　　　　　　　　　/*
　　　　　　　　　　 * 这里开始操作数组了，第一步是插入前段DOM的高度和遍历值；比如["100.1"];我特意做的手脚这样使用parseInt();就可以直接获取我们要用的number,100
　　　　　　　　　　 * 二后面的遍历值是为了要得到left;
　　　　　　　　　　 * 第二部是把数组从小到大排列；
　　　　　　　　　　 */
                $.Use(_arr).push($(this).outerHeight()+"."+i).sort(function(_a_,_b_){return parseInt(_a_) - parseInt(_b_);});
            }else{
 　　　　　　　　 /*
　　　　　　　　　 * 获取数组的第一个，这个就是最小的值；遍历值我们也有直接写样式就OK了
　　　　　　　　　 */
                var _first = _arr.shift();
                var _minheight = parseInt(_first);
                var _which = +_first.split(".")[1];
                $(this).css({
                    top:_minheight+"px",
                    left:_lis.eq(_which).css("left")+"px"
                })
　　　　　　　　　 /*
　　　　　　　　　　* 也是数组的操作；上面我们把第一个最小的值给删除了，我们现在后面插一个值；这个值是：这个元素的高+position().top;然后把得到的数组从小到大排列
　　　　　　　　　　*/
                $.Use(_arr).push($(this).outerHeight()+_minheight+"."+i).sort(function(_a_,_b_){return parseInt(_a_) - parseInt(_b_);});
            }
        });
        _id.css({
            height:parseInt(_arr[_row-1])+"px"
        })
        $.log(_arr)
    }
}

3.到这一个静态的瀑布流已经出来了可以点这个静态的DEMO;但是如果不设高度呢？我们就要靠php来帮忙了；

/*
 * 这个是别人给我找的方法；可以帮我们获取图片的高度。
 */
<?php
function getImgHeight($img){
    return imagesy(imagecreatefromjpeg($img));
}
?>
<img src="images/01.jpg" height="<?php echo getImgHeight("images/01.jpg");?>" alt="" />

DEMO