jQueryでブロックの高さを揃える
- 2011/12/30 14:47
- カテゴリー:制作, プログラム
- タグ:JavaScript
CSSをブロックを並べると、それぞれの高さを揃えるのが難しいことが解ります。高さをピクセル単位で指定することはできますが、それだとブロック内の文字数が変わったときに入りきらなくなる問題があります。これは、JavaScriptで要素の高さを揃えるプラグインです。
利用、流用は自由にどうぞ。またプラグイン作成の基本は jQueryプラグインの作成メモ 前編 と jQueryプラグインの作成メモ 後編 を参考にしてください。
以下、内容を解説していきます。
HTML
HTMLは以下のとおりです。単にブロック要素を並べているだけです。後ほどクラス名をもとにjQueryのプラグインを反映させるため、class="sample"
を設定しています。
<div class="sample">
<div><p>ブロック1。ブロック1。</p></div>
<div><p>ブロック2。ブロック2。ブロック2。ブロック2。</p></div>
~略~
<div><p>ブロック8。</p></div>
</div>
CSS
CSSは以下のとおりです。float
でブロック要素を並べて表示しています。ここでは高さを指定しません。
<style>
div.sample {
overflow: hidden;
width: 600px;
border: 1px solid #000000;
}
div.sample div {
float: left;
width: 200px;
background-color: #EEEEEE;
}
</style>
JavaScript
JavaScriptは以下のとおりです。まずはjQueryと、自作プラグインの jquery.heightadjust.js
を読み込みます。jquery.heightadjust.js
は、要素の高さを揃えてくれるjQueryプラグインです。オプションとしてcolumn(カラム数)を指定することができます。例えばブロック要素を3列に並べる場合、3
と指定すると3つごとに要素の高さを揃えてくれます。
<script src="../jquery.js"></script>
<script src="jquery.heightadjust.js"></script>
<script>
$(document).ready(function() {
$('.sample div').heightadjust({
column: 3 //カラム数
});
});
</script>
プラグイン
jquery.heightadjust.js
の内容は以下のとおりです。
(function($) {
$.fn.heightadjust = function(option) {
var settings = $.extend({
column: 0
}, option);
var heights = [];
var column = 0;
$(this).each(function(i) {
if (settings.column) {
column = parseInt(i / settings.column);
}
if (heights[column] == undefined || $(this).height() > heights[column]) {
heights[column] = $(this).height();
}
});
if (settings.column) {
$(this).each(function(i) {
$(this).height(heights[parseInt(i / settings.column)]);
});
} else {
$(this).height(heights[0]);
}
return this;
};
})(jQuery);
まずは
$.fn.heightadjust = function(option) {
var settings = $.extend({
column: 0
}, option);
の部分でオプションを受け取ります。columnの初期値は 0
としています。
var heights = [];
var column = 0;
$(this).each(function(i) {
if (settings.column) {
column = parseInt(i / settings.column);
}
if (heights[column] == undefined || $(this).height() > heights[column]) {
heights[column] = $(this).height();
}
});
指定されたブロック要素のうち、一番高い要素の高さを調べています。
オプションで column
が指定されなければ、heights[0]
に一番高い要素の高さが入ります。
オプションで column
が指定されていれば、1行目の中で一番高い要素の高さが heights[0]
に入り、2行目の中で一番高い要素の高さが heights[1]
に入り、3行目の中で一番高い要素の高さが heights[2]
に入り…となります。
if (settings.column) {
$(this).each(function(i) {
$(this).height(heights[parseInt(i / settings.column)]);
});
} else {
$(this).height(heights[0]);
}
指定されたブロック要素の高さを変更します。
オプションで column
が指定されなければ、すべての要素の高さを heights[0]
に変更します。
オプションで column
が指定されていれば、その行の中で一番高い要素の高さに変更します。
これで完成です。