【jQuery】簡単プラグイン不要！高さを揃えるjsを実装する方法

2018年5月12日

高さを揃えるjsのプラグインは色々ありますが、そもそもプラグインを使う必要ある？とふと思ったので、プラグインなしでサンプルを実装してみました。

最近はcss3のflexboxがほとんどのブラウザに対応し、cssのみで要素の高さが揃えられるようになったのですが、flexboxではカバーしづらい部分で要素の高さを揃えたい時にはちょいと使えるかと思います！

スポンサードサーチ

高さを揃えるjs（プラグインなし）のデモ

https://hiroyayabiku.github.io/HeightArrange/

高さを揃えるjs（プラグインなし）をダウンロード

https://github.com/HiroyaYabiku/HeightArrange

スポンサードサーチ

高さを揃えるjs（プラグインなし）のソースコード

// 要素の高さを揃えるjs
var HeightArrange = function(targetEl) {
this.targetEl = $(targetEl);
};
HeightArrange.prototype.fn = function() {
var that = this;
$(window).on('load resize', function() {
var heightList = new Array();
var $winWidth = $(window).width();
that.targetEl.css({ 'min-height': '100%' });
that.targetEl.each(function(index) {
var $eachThis = $(this);
setTimeout(function() {
heightList[index] = $eachThis.outerHeight();
var maxH = Math.max.apply(null,heightList);
that.targetEl.css({ 'min-height': maxH + 'px' });
},500)
});
});
};
var HeightArrangeText = new HeightArrange('.text');
HeightArrangeText.fn();
var HeightArrangeText2 = new HeightArrange('.text2');
HeightArrangeText2.fn();