[JS]複数行の異なる高さのブロックをそれぞれ同じ高さに揃えるスクリプト

画像のサムネイルやテキストを配置したボックスなど、異なる高さのブロックが数多くあっても全ての高さを等しく揃えるスクリプトを紹介します。

Equal Height Blocks in Rows

一行目と二行目では、違う高さで揃えていることに注目してください。

[ad#ad-2]

デモでは異なる高さのブロック（スクリプトオフ時）が、スクリプトによって行ごとに同じ高さに等しく揃えています。

デモページ

実装のアイデアとなったのは、「Making DIVs, using the CSS "Float Left" property...」とのことで、そのdiv要素がどの横列に属しているか調べ、その中で一番高いものに揃えています。

[ad#ad-2]

実装方法

HTML

画像やテキストを配置できるdiv要素を使用しています。

<div id="page-wrap">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

CSS

スタイルシートは、それぞれのdiv要素に異なる高さを指定します。

#page-wrap > div { display: block; float: left; margin: 0 10px 10px 0; background: blue; width: 50px; }
#page-wrap > div:nth-child(1) { height: 100px; }
#page-wrap > div:nth-child(2) { height: 120px; }
#page-wrap > div:nth-child(3) { height: 110px; }
#page-wrap > div:nth-child(4) { height: 140px; }
#page-wrap > div:nth-child(5) { height: 60px; }
#page-wrap > div:nth-child(6) { height: 80px; }
#page-wrap > div:nth-child(7) { height: 50px; }
#page-wrap > div:nth-child(8) { height: 110px; }

JavaScript

「jquery.js」を外部ファイルとし、以下のスクリプトを記述します。

$(function() {
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$('#page-wrap > div').each(function() {
$el = $(this);
topPostion = $el.position().top;
if (currentRowStart != topPostion) {
// we just came to a new row. Set all the heights on the completed row
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { rowDivs[currentDiv].height(currentTallest); } // set the variables for the new row rowDivs.length = 0; // empty the array currentRowStart = topPostion; currentTallest = $el.height(); rowDivs.push($el); } else { // another div on the current row. Add it to the list and check if it's taller rowDivs.push($el); currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest); } // do the last row for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { rowDivs[currentDiv].height(currentTallest); } }); }); [/javascript]

自サイトで利用する際は、「#page-wrap > div」（L.7）の箇所を揃えたいブロックを内包しているdiv要素のセレクタに変更してください。