スポンサードリンク

前回、カテゴリー一覧を作った話の続きです。
カテゴリーごとに
登録されている子、孫の数で
カテゴリーボックスの高さがバラバラになってしまっています。
そのため、floatなど使っても高さが違うために
見た目が悪く、艦単位は上手くレイアウトができない状態でした。
そこで、簡単にボックスを配置してくれる
【jQuery masonry】というプラグインをいれました。
スポンサードリンク
自動整列プラグインjQuery masonryとは
これは理想に近いものでした。
パスルのように高さが異なっているボックスを
上に詰めてくれて、しかも横にも詰めてくれる。
下記のような感じに自動でしてくれます。

【参考サイト】
[jQuery]自動整列プラグインjQuery masonryの設定方法・オプションまとめ
自動整列プラグインjQuery masonryの設置方法
ファイルをダウンロードします。
jQuerymasonryは→Masonry Cascading grid layout libraryからダウンロードします。

このサイト自体にもjQuerymasonryが使われているので
ブラウザの幅を狭くしたりしてみると、
このプラグインの動きがわかると思います。

幅を狭めるとこんな感じに変わります。
ダウンロードは画像の赤枠からします。

あと、当たり前ですが、jQueryが必要になります。
jQueryは→jQueryからダウンロードして下さい。
headタグ内にてファイルを読み込みます。
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.masonry.min.js"></script>
※パスは環境に合わせて下さい、
前回の2で記述したものの下に下記を加える
<script type="text/javascript">// <![CDATA[ $(function(){ $('#container').masonry({ itemSelector: '.box', columnWidth: 200 //一列の幅サイズを指定 }); }); // ]]></script>
そろえたいボックスを囲っているものにID名、そろえたいボックスにClassを指定する
<div id="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>
以上です。
あとはCSSで装飾すればいいだけです。
各ボックス(boxクラス)は別のID名かクラス名を付けて
高さを変えて使って下さい。
jQUeryで指定したクラス名(今回だとboxクラス)が指定してあれば
自動で調整してくれます。
【3.~】で書いたスクリプトの中の「# container」と「.box」は変更可能です。
以下はオプション
columnWidth: 200, //一列の幅サイズを指定
isAnimated: true, //スムースアニメーション設定
isFitWidth: true, //親要素の幅サイズを合わせる
isRTL: false, //整理される要素が左右逆になる
gutterWidth: 0, //整理される要素間の溝の幅を指定
containerStyle: { position: ‘relative’ }, //親要素にスタイルを追加できる
isResizable: true //ウィンドウサイズが変更された時に並び替え
とりあえず、アニメーションなどは必要なかったので
最低限の配置のみを指定しました。
スポンサードリンク