[jQuery]横並びの要素の高さを行毎に揃えるプラグインjQuery.lineUp

jQueryプラグイン・ライブラリ

2013.06.20

floatを使って要素を横並びで表示する場合、「高さの異なる要素を行を揃えてキレいに表示したい！」と思いますが、

「heightを固定値にしてoverfloe:hiddenではみ出た情報を非表示にして…なんてのはスマートじゃないし…」という時に便利なjQueryプラグインがjQuery.lineUpです。

jQuery.lineUpは横並びにした要素の高さを行毎きちんと揃えて、良い感じに並べてくれます。

jQuery.lineUp のダウンロード
ブロック要素を並べる記述例
jQuery.lineUp の設置
data-lineup-selector 属性を使う方法

jQuery.lineUp のダウンロード

以下ページより、jQuery.lineUpのファイルをダウンロードします。
http://mach2.github.com/jquery-lineup/

ブロック要素を並べる記述例

以下、レイアウトサンプルです。

<style>
.contents {
	overflow: hidden;
}
.contents .box {
	float: left;
	width: 22.155%;
	height:auto;
	margin:2px;
	padding:1%;
	background:#f9f9f9;
}
</style>

<div class="contents">
    <div class="box">要素1</div>
    <div class="box">要素2</div>
    <div class="box">要素3</div>
    <div class="box">要素4</div>
</div>

<style>

.contents {

overflow: hidden;

}

.contents .box {

float: left;

width: 22.155%;

height:auto;

margin:2px;

padding:1%;

background:#f9f9f9;

}

</style>

</div>

この場合、横並びにする要素は.boxですが、高さは指定していません。

jQuery.lineUp の設置

jqueryファイルと一緒に、jquery.lineup.jsファイルを設置します。

<script src="./jquery.min.js"></script>
<script src="./jquery.lineup.js"></script>
<script>
$(".box").lineUp({
    onFontResize : false,
    onResize : true
});
</script>

$(".box").lineUp({

onFontResize : false,

onResize : true

});

</script>

$(".box").lineUp();ですが、上記 HTML 記述例で横並びにする要素.boxに対して、高さを行毎に揃えるようにしています。

オプションに関しては、こちらのページの中段の「オプション」項目も合わせて参考にしてみてください。

参考ページ
http://mach2.github.io/jquery-lineup/

data-lineup-selector 属性を使う方法

data-lineup-selector属性に、横並びにする要素のクラス（.box）を指定するだけでも、高さを行毎に揃える事ができます。

その場合の記述はこのような感じになります。

<script src="./jquery.min.js"></script>
<script src="./jquery.lineup.js" data-lineup-selector=".box"></script>

1 2	<script src="./jquery.min.js"></script> <script src="./jquery.lineup.js" data-lineup-selector=".box"></script>

以下に、jQuery.lineUpを利用した簡単なサンプルを用意してみました。

jQuery.lineUp のデモ

参考ページ
http://blog.mach2.jp/2013/03/jquery-lineup.html