デモページはこちら

jquery.matchHeight.jsのようなプラグインを利用せず、jQueryのみでhtml要素の高さ揃えを実装します。プラグイン利用時と違い、画面リサイズ時に高さが可変の場合は対応できない制約があります。以下のhtml構造の、高さの異なるh3タグでテストします。

<div class="container">
    <div class="box">
        <img src="images/photo01.jpg" alt="">
        <h3>タイトル01</h3>
        <p>ダミーテキストダミーテキストダミーテキスト</p>
    </div>
    <div class="box">
        <img src="images/photo02.jpg" alt="">
        <h3>タイトル02<br>タイトル02</h3>
        <p>ダミーテキストダミーテキストダミーテキスト</p>
    </div>
    <div class="box">
        <img src="images/photo03.jpg" alt="">
        <h3>タイトル03<br>タイトル03<br>タイトル03</h3>
        <p>ダミーテキスト</p>
    </div>
    <div class="box">
        <img src="images/photo04.jpg" alt="">
        <h3>タイトル04</h3>
        <p>ダミーテキスト</p>
    </div>
</div>

JavaScriptのwindow.matchMediaメソッドを利用してPCとスマホで処理を分けます。スマホでは画面リサイズ時にh3タグの高さが変わるため、heightをautoに指定します。PCでは画面リサイズ時にh3タグの高さが変わらないため、高さの一番大きいh3タグのheightを全てのh3タグに指定します。

function matchFunc(){
	if(window.matchMedia("(max-width:768px)").matches){
		$('h3').height('auto');
	}
	if(window.matchMedia("(min-width:769px)").matches){
		var maxHeight = 0;
		$('h3').each(function() {
			if ($(this).height() > maxHeight) maxHeight = $(this).height();
		});
		$('h3').height(maxHeight);
	}
}
//読み込み時
document.addEventListener("DOMContentLoaded", matchFunc);
//リサイズ時
window.matchMedia("(max-width:768px)").addListener(matchFunc);