equalheight.js を使ってレスポンシブなカラムの高さ揃えをする

EqualHeight.jsは複数カラムの縦幅を揃えてくれるjQueryプラグインです。
レスポンシブにも対応していてとっても便利です!

デモページ

EqualHeight.js-配布サイト

基本的な使い方

常に特定のカラムの高さを揃えたい場合は、以下のように使います。

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.equalheight.min.js"></script>
<script>
$(document).ready(function () {
    $('.column2 p').equalHeight(); //高さを揃えたい要素を指定
});
</script>

css

.column2 {
    width: 100%;
    overflow: hidden;
}
.column2 div {
	float: left;
	width: 50%;
}
.column2 div p{
	margin: 10px;
	padding: 10px;
	background: #FCCDE4;
}

複合的な使い方

上の段はずっと2カラムのままで、下の段は横幅639px以下は1カラム、640px以上は2カラム、800px以上は4カラムになるようにしています。
こちらの方法でIE7,8に対応する方法は見つからなかったので、その場合はこちらの記事をご参考ください。

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.equalheight.min.js"></script>
<script>
$(document).ready(function () {
    //上の2カラムの高さ揃え
	$('.column2 p').equalHeight(); //高さを揃えたい要素を指定

    //下の4カラムの高さ揃え
				var equalHeight = $('.column1-2 p').equalHeight({wait: true});
				// Browser supports matchMedia
				if (window.matchMedia) {
								// MediaQueryList
								var mql = window.matchMedia("(min-width: 640px)"); //このサイズ以上で高さ揃えを行う
								// MediaQueryListListener
								var equalHeightCheck = function (mql) {
												if (mql.matches) {
																equalHeight.start();
												} else {
																equalHeight.stop();
												}
								};
								// Add listener
								mql.addListener(equalHeightCheck);
								// Manually call listener
								equalHeightCheck(mql);
				}
				// Browser doesn't support matchMedia
				else {
								equalHeight.start();
				}
});

css

.column2 {
    width: 100%;
	overflow: hidden;
}
.column2 div {
	float: left;
	width: 50%;
}
.column2 div p{
	margin: 10px;
	padding: 10px;
	background: #FCCDE4;
}
.column1-2 {
	width: 100%;
	overflow: hidden;
}
.column1-2 div p {
	background: #ddd;
	margin: 10px;
	padding: 10px;
}
@media (min-width: 640px) {
	.column1-2 div {
		width: 50%;
		float: left;
	}
}
@media (min-width: 800px) {
	.column1-2 div {
		width: 25%;
		float: left;
	}
}

デモページ

RELATED POSTS