目次

実際に動きを見てみよう

まずは本家のサイトのデモを見て動きを確認してみよう
http://brm.io/jquery-match-height-demo/

テキストの行数や画像の縦幅が異なっていてもきれいに揃っています。
『reomve matchHeight』ボタンを押すとこのプラグインを読み込む前の動作になり、その差は一目瞭然です。

ソースコードをダウンロード

とっても簡単に導入できるので早速やってみましょう。
本家サイトのリンクからGitHubのページに移動し、ソースコードをダウンロードします。
https://github.com/liabru/jquery-match-height

必要ファイルの読み込み

jQueryとプラグイン本体を自分の環境に合わせて設置して読み込みましょう。

 

HTMLのマークアップは以下のような感じです。

 

必要な作業は以上です。簡単ですね。
クラス名『matchHeight』の部分は自分の好きなように設定してもOKですよ。

軽量で使い方もシンプルなのでとても便利なプラグインですね。サムネイルやテキストが数行入るようなリストを使う時は是非お試しください。

この記事をシェア