さぁ!検索しよう!

高さを揃えるだけでなく、ウィンドウサイズの変化に応じて自動で揃うjQueryプラグイン「matchHeight.js」を紹介します。

前回の記事で紹介したtile.jsよりも高性能なプラグインです。

DEMO

ただ高さを揃えるだけでなく、ウィンドウサイズが変化した場合でもそれに応じて高さが揃えられていることが確認できます。

準備

  1. GitHubからZIPファイルをダウンロードし、解凍します。
  2. その中にあるjquery.matchHeight-min.jsを</body>の直前に読み込みます。
    	<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.matchHeight-min.js"></script>
    	</body>
    	

使い方

先ほど読み込んだJSファイルの下に、高さを揃えたい要素に対してmatchHeightを実行させるスクリプトを記述します。

//HTML
<ul class="posts">
	<li class="post"></li>
	<li class="post"></li>
	<li class="post"></li>
	<li class="post"></li>
</ul>
//JS
<script>
$(function(){
      $('.post').matchHeight();
});
</script>

複数の要素に適用することも可能です。

//HTML
<ul class="posts">
	<li class="post">
		<aside class="eye-catch"></aside>
	</li>
	<li class="post">
		<aside class="eye-catch"></aside>
	</li>
	<li class="post">
		<aside class="eye-catch"></aside>
	</li>
	<li class="post">
		<aside class="eye-catch"></aside>
	</li>
</ul>
//JS
<script>
$(function(){
      $('.post').matchHeight();
      $('.eye-catch').matchHeight();
});
</script>

以上で、レスポンシブにも対応、隣り合う要素を高さを揃えて配置するjQueryプラグイン「matchHeight.js」を終わります。