レスポンシブデザインに対応した行ぞろえ

特徴

1. コンテンツの高さを揃える
2. 行ごとに高さを変更させる場合は、カラム数を指定することができる。
3. ウィンドウサイズに合わせて行ごとのカラム数が変わるようなレスポンジブデザインにも対応している。

panel.html

<div class="row">

    <div class="col-xs-12 col-sm-4 col-md-2">
        <a href="#" class="panel panel-default">
            <div class="panel-heading">
                パネル１
            </div>
            <div class="panel-body">
                こんなパネルがあります。
            </div>
        </a>
    </div>

    <div class="col-xs-12 col-sm-4 col-md-2">
        <a href="#" class="panel panel-default">
            <div class="panel-heading">
                パネル2
            </div>
            <div class="panel-body">
                こんなパネルがあります。<br>
                ウィンドウサイズによって、1行1列、1行4列、1行6列に変動します。
            </div>
        </a>
    </div>

    <div class="col-xs-12 col-sm-4 col-md-2">
        <a href="#" class="panel panel-default">
            <div class="panel-heading">
                パネル3
            </div>
            <div class="panel-body">
                こんなパネルがあります。<br>
                ウィンドウサイズが変わり、行ごとのパネル数が変わったとしても、常時高さがそろって表示されるようなjsライブラリです。
            </div>
        </a>
    </div>

    <div class="col-xs-12 col-sm-4 col-md-2">
        <a href="#" class="panel panel-default">
            <div class="panel-heading">
                パネル4
            </div>
            <div class="panel-body">
                こんなパネルがあります。
            </div>
        </a>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-2">
        <a href="#" class="panel panel-default">
            <div class="panel-heading">
                パネル5
            </div>
            <div class="panel-body">
                こんなパネルがあります。
            </div>
        </a>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-2">
        <a href="#" class="panel panel-default">
            <div class="panel-heading">
                パネル6
            </div>
            <div class="panel-body">
                こんなパネルがあります。
            </div>
        </a>
    </div>
</div>

<script>
    // 常にすべてのブロックを同じ高さにしたい場合
    $window.on('load', function () {
        $('.panel-body').heightLine();
    });

    // 幅に合わせてカラム数を変更
    $window.on('load', function () {
        $('.panel-body')
            .heightLine({ "minWidth": 992, "columns": 6 })
            .heightLine({ "minWidth": 768, "maxWidth": 991, "columns": 3 })
            .heightLine({ "maxWidth": 767, "columns": 1 });
    });

</script>

jquery.fixline.js

(function ($) {
    $.fn.commonHeightBlock = function () {
        var target = this, windowResizeId = Math.random();
        var commonHeightBlockObj = {
            op: {
                'maxWidth': 10000,
                'minWidth': 0,
                'columns': 10000
            },
            setOption: function (op) {
                this.op = $.extend(this.op, op);
            },
            destroy: function () {
                target.css('height', '');
            },
            create: function (op) {
                var self = this,
                    maxHeights = [],
                    windowWidth = window.innerWidth;
                self.setOption(op);

                if (windowWidth <= self.op.maxWidth && windowWidth >= self.op.minWidth) {
                    this.destroy();

                    target.each(function (i) {
                        var c = Math.floor(i / self.op.columns);

                        if (maxHeights[c] === undefined || $(this).outerHeight() > maxHeights[c]) {
                            maxHeights[c] = $(this).outerHeight();
                        }
                    }).each(function (i) {
                        var c = Math.floor(i / self.op.columns);

                        var height = maxHeights[c]
                                   - parseInt($(this).css('padding-top'))
                                   - parseInt($(this).css('padding-bottom'));
                        $(this).height(height);
                    });
                }
            },
            refresh: function (op) {
                this.create(op);
            },
            removeEvent: function () {
                $(window).off("resize." + windowResizeId);
                target.off("destroy refresh");
            }
        };

        commonHeightBlockObj['create'](arguments[0]);

        $(window).on('resize.' + windowResizeId, function () {
            commonHeightBlockObj['refresh']();
        });

        target.on('destroy', function () {
            commonHeightBlockObj['removeEvent']();
            commonHeightBlockObj['destroy']();
        }).on('refresh', function () {
            commonHeightBlockObj['refresh']();
        });

        return target;
    };
})(jQuery);