[JS]複数並んだブロック要素の高さを最大値で揃えるjQuery プラグイン「jQueryAutoHeight」｜jQueryプラグイン・ライブラリ

[JS]複数並んだブロック要素の高さを最大値で揃えるjQuery プラグイン「jQueryAutoHeight」

スポンサード

float などで横に並べたブロック要素の高さを揃えることができるjQuery プラグイン「jQueryAutoHeight」のご紹介です。

jQueryAutoHeight は、複数並んだブロック要素を高さの最大値で揃えて表示できるだけでなく、ブロック要素を横に何個並べるか？というカラムの指定もできますので、レイアウトの自由度も高くて非常に便利なプラグインです。

jQueryAutoHeight のインストール

以下のページより jQueryAutoHeight のファイルをダウンロードします。

jQueryAutoHeight.js

jQueryAutoHeight の設定

jquery と一緒に jQueryAutoHeight ファイルを設置します。

<script src="./jquery.min.js"></script>
<script src="./jQueryAutoHeight.js"></script>
<script>
$(function(){
    $('.block').autoHeight();
});
</script>

$(function(){

$('.block').autoHeight();

});

</script>

今回は、.block 要素をfloat で横に並べるようなサンプルを作っていくことにします。

float で並べるブロック要素の記述例

まずはCSS の記述例から。

.contents {
	width:auto;
}

.contents .block {
	float: left;
	display:block;
	width: 130px;
	margin:4px 3px;
	padding:5px;
	background:#f9f9f9;
	font-size:90%;
	border:1px solid #ccc;
}

.contents {

width:auto;

}

.contents .block {

float: left;

display:block;

width: 130px;

margin:4px 3px;

padding:5px;

background:#f9f9f9;

font-size:90%;

border:1px solid #ccc;

}

続いてHTML 側の記述例です。
要素の高さに差を出す為に、長文のダミーテキストも混ぜ込んでいます。

<div class="contents">
    <div class="block">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
    <div class="block">テキストテキストテキストテキストテキストテキスト</div>
    <div class="block">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
    <div class="block">テキストテキストテキスト</div>
    <div class="block">テキストテキストテキストテキストテキストテキストテキスト</div>
    <div class="block">テキストテキストテキストテキスト</div>
    <div class="block">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
    <div class="block">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
    <div class="block">テキストテキストテキストテキストテキスト</div>
    <div class="block">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>

<div class="block">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>

<div class="block">テキストテキストテキストテキストテキストテキスト</div>

<div class="block">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>

<div class="block">テキストテキストテキスト</div>

<div class="block">テキストテキストテキストテキストテキストテキストテキスト</div>

<div class="block">テキストテキストテキストテキスト</div>

<div class="block">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>

<div class="block">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>

<div class="block">テキストテキストテキストテキストテキスト</div>

<div class="block">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>

</div>

.block 要素に対して高さを指定していませんが、一番高さのある要素に揃って並びます。

jQueryAutoHeight のデモ

カラムを指定

jQueryAutoHeight のオプションとして、カラムを指定することができます。

<script src="./jquery.min.js"></script>
<script src="./jQueryAutoHeight.js"></script>
<script>
$(function(){
    $('.block').autoHeight({
		column:4,
		clear:1
	});
});
</script>