jQueryの「jquery.tile.js」プラグインを使用して、カラムの高さを揃える方法をメモします。
「jQueryAutoHeight.js」プラグインでも良いのですが、こちらも使用しやすいです。
「jquery.tile.js」は一行の要素数を数字で指定するだけなので、とても簡単です。
下記のサイトよりダウンロードできます。
http://urin.github.io/jquery.tile.js/
横に並べて表示するカラムなどは高さが揃っていた方がきれいに見えると思うのおすすめです。
下記にjQueryの「jquery.tile.js」プラグインを使った時の使用方法を記載します。
■ jquery.tile.jsの使用方法
・全てのカラムの高さを揃える
【js】
1 2 3 4 5 6 7 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script type="text/javascript" src="jquery.tile.js"></script><script type="application/javascript">$(function(){ $('.box').tile();});</script> |
【css】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <style type="text/css"> #main { width: 500px; margin: 0 auto; } .box { width: 80px; padding: 10px; border: 1px dashed #5BAEC0; margin: 5px; float: left; display: block; }</style> |
【html】
1 2 3 4 5 6 7 8 9 10 | <div id="main"> <div class="box">test</div> <div class="box">test<br>test<br>test<br>test<br>test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div></div> |
【表示例】
・一行ごとの高さで揃える
【js】
1 2 3 4 5 6 7 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script type="text/javascript" src="jquery.tile.js"></script><script type="application/javascript">$(function(){ $('.box').tile(4);});</script> |
【html】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id="main"> <div class="box">test</div> <div class="box">サンプル<br>サンプル<br>サンプル<br>サンプル<br>サンプル</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">あいうえおかきくけこさしすせそたちつてと</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div></div> |
【表示例】
※画像を出力する際は、画像を読み込む前にJSが動いてしまうので下記のようにを記述します。
1 2 3 | $(window).load(function(){ $('.box').tile();}); |