高さを揃えるjQueryプラグイン「jQuery-fixHeightSimple」をレスポンシブ対応しました

以前、公開させていただいた、高さを揃えるjQueryプラグインの「jQuery-fixHeightSimple」を、

レスポンシブに対応させました。

How to use (使い方)　Options (オプション)

↓DEMOはこちら

DEMO

↓新しい「jQuery-fixHeightSimple」はこちらからダウンロードしてください

Download

min版 Download

2017.03.01追記: いくつかのバグを修正いたしました

使い方

1. HTML内でjQueryと共にダウンロード後サーバーに配置したプラグインのJSファイルを読み込んでください


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-fixHeightSimple.js"></script>

1 2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="js/jquery-fixHeightSimple.js"></script>

2. 以下のコードを入力しプラグインを実行してください


$(function(){
	$(".items1 li a").fixHeightSimple();
});

$(function(){

$(".items1 li a").fixHeightSimple();

});

高さをそろえる要素を、すべて同じ高さにする場合はこれでOKです。

行ごとに高さを変えたい場合は、以下の２つの方法で指定することができます。

i. カラム数を指定する


$(function(){
	$(".items2 li a").fixHeightSimple({
		column : 5 
	});
});

$(function(){

$(".items2 li a").fixHeightSimple({

column : 5

});

固定でカラムの数を指定したい場合は、上記のようにカラムの数をオプションで指定してください。

ii. レスポンシブを有効にする


$(function(){
    $(".items3 li a").fixHeightSimple({
        responsive: true, 
        responsiveParent: ".items3" 
    });
});

$(function(){

$(".items3 li a").fixHeightSimple({

responsive: true,

responsiveParent: ".items3"

});

今回新たに追加したオプションのresponsiveをtrueに設定することで、

現在のカラム数を自動で計算し、そのときの行ごとに高さを揃えます。

responsiveParentで指定した要素が、そのカラム数の基準になります。

また、レスポンシブサイトでは、

CSSでbox-sizing: border-boxを指定している場合もよくあると思いますが、

その場合は、以下のようにオプションでboxSizingBorderBox: trueを指定してください。


$(function(){
    $(".items4 li a").fixHeightSimple({
        responsive: true,
        responsiveParent: ".items4",
        boxSizingBorderBox: true
    });
});

$(function(){

$(".items4 li a").fixHeightSimple({

responsive: true,

responsiveParent: ".items4",

boxSizingBorderBox: true

});

オプション

Options	Default	Description
column	0	高さをそろえる行のカラム数を固定で指定
responsive	false	trueを指定で、そのときの行ごとに高さを自動で揃える
responsiveParent	“body”	レスポンシブ時に高さを揃える要素群を囲っている要素を指定
boxSizingBorderBox	false	高さを揃える要素にCSSでbox-sizing:border-boxが指定されている場合は、tureを指定