JavaScript瀑布流组件

html

<div class="brand-list" id="brand-waterfall">
                    <!-- 循环字母模块 item -->
                    <div class="item picBlock">
                        <div class="boxgrid caption">
                            <div class="picImage">
                                <img src="https://jp.netcdn.space/digital/video/abpn00002/abpn00002ps.jpg" class="pic"/>
                            </div>
                            <p class="picP">無邪気に娘 自らもロ動員で熱心技を研
                                ポルチオ責め大好な生粋のス好きで5発も！</p>
                        </div>
                    </div>
                </div>

JavaScript

<!--瀑布流-->
<script type="text/javascript">

    $(function () {

        $('#brand-waterfall').waterfall();

    });


    // 瀑布流插件

    // pannysp 2013.4.9

    ;(function ($) {

        $.fn.waterfall = function (options) {

            var df = {

                item: '.item',

                margin: 30,

                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);

</script>

CSS

/*瀑布流组件*/
.boxgrid {
    /*width: 377px;*/
    /*height: 227px;*/
    overflow: hidden;
    position: relative;
}

.item .boxgrid h3 {
    margin: 10px 0px 10px 0px;
    color: #FFF;
    font: 24pt 微软雅黑, sans-serif;
    letter-spacing: -1px;
    font-weight: bold;
    text-align: center;
}

.brand-list .item {
    position: absolute;
    /*width: 377px;*/
    /*background: url(images/132.gif) no-repeat center center;*/
    top: 0;
    left: 40%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}