(function($) {

    $.fn.waterfall = function(options) {

        var df = {

            item: '.item',

            margin: 2,

            addfooter: true

        };

        options = $.extend(df, options);

        return this.each(function() {

            var $box = $(this),
                pos = [],

                _box_width = $box.width(),

                $items = $box.find(options.item),

                _owidth = $items.eq(0).outerWidth() + options.margin,

                _oheight = $items.eq(0).outerHeight() + options.margin,

                _num = Math.floor(_box_width / _owidth);



            (function() {

                var i = 0;

                for (; i < _num; i++) {

                    pos.push([i * _owidth, 0]);

                }

            })();



            $items.each(function() {

                var _this = $(this),

                    _temp = 0,

                    _height = _this.outerHeight() + options.margin;



                _this.hover(function() {

                    _this.addClass('hover');

                }, function() {

                    _this.removeClass('hover');

                });



                for (var j = 0; j < _num; j++) {

                    if (pos[j][1] < pos[_temp][1]) {

                        //鏆傚瓨top鍊兼渶灏忛偅鍒楃殑index

                        _temp = j;

                    }

                }

                this.style.cssText = 'left:' + pos[_temp][0] + 'px; top:' + pos[_temp][1] + 'px;';

                //鎻掑叆鍚庯紝鏇存柊涓嬭鍒楃殑top鍊

                pos[_temp][1] = pos[_temp][1] + _height;

            });



            // 璁＄畻top鍊兼渶澶х殑璧嬬粰澶栧洿div

            (function() {

                var i = 0,
                    tops = [];

                for (; i < _num; i++) {

                    tops.push(pos[i][1]);

                }

                tops.sort(function(a, b) {

                    return a - b;

                });

                $box.height(tops[_num - 1]);



                //澧炲姞灏鹃儴濉厖div

                if (options.addfooter) {

                    addfooter(tops[_num - 1]);

                }



            })();



            function addfooter(max) {

                var addfooter = document.createElement('div');

                addfooter.className = 'item additem';

                for (var i = 0; i < _num; i++) {

                    if (max != pos[i][1]) {

                        var clone = addfooter.cloneNode(),

                            _height = max - pos[i][1] - options.margin;

                        clone.style.cssText = 'left:' + pos[i][0] + 'px; top:' + pos[i][1] + 'px; height:' + _height + 'px;';

                        $box[0].appendChild(clone);

                    }

                }

            }



        });

    }

})(jQuery);