jquery.tile.js （タイル状に配置）
jquery.tile.js
要素をタイル状に並べてくれるプラグイン。
説明サイト
URIN HACK：要素の高さを揃える超軽量なjQueryプラグイン jquery.tile.js
【環境】
jQuery:1.11.2, 2.1.3
jQuery UI:1.11.2
jQuery:1.11.2, 2.1.3
jQuery UI:1.11.2
JS
jquery.tile.js
こちらからソースをコピペして
jquery.tile.js
を作成して配置。
HTML
JavaScript 部分
- <script src="jquery.tile.js"></script>
- <script type="text/javascript">
- $(function(){
- $('.tile').tile();
- });
- </script>
４行目、titl メソッドの引数に数値を入れると、列数を指定できる。
というわけではなく、x列毎に同じ高さに揃える という指定らしく
- $('.tile').tile(4);
このように設定して、表示エリアを５列分取ったら、高さがずれたｗ
つまり、列数を指定するときは、表示幅もそれに合わせて指定する必要がある。
要素部分
- <div class="tile">1</div>
- <div class="tile">2</div>
- <div class="tile">3</div>
- <div class="tile">4</div>
- <div class="tile">5</div>
綺麗に並んだ～♪
CSS
お好みに応じて設定。
- .tile {
- border:1px solid #999;
- background:#f0f0f0;
- float:left;
- width:130px;
- margin:0 10px 10px 0;
- }
啓文社：[jQuery] タイル表示
CSS は、こちらのサイトの例をいただいてきた。
こちらのサイトのおかげで、このプラグインに出会うことができました～