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

// 要素の高さを揃える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();

高さを揃えるjs（プラグインなし）の簡単な使い方

new HeightArrange()の引数に高さを揃えたい要素のクラス名で指定します。たったこれだけで要素の高さを揃えることができます！

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

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

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

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

高さを揃えるjs（プラグインなし）の簡単な使い方

関連記事