(jQuery)自動整列プラグインjQuery masonry

で囲んでカテゴリーごとにすることはできたんですが、

登録されている子、孫の数で

カテゴリーボックスの高さがバラバラになってしまっています。

そのため、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 //ウィンドウサイズが変更された時に並び替え

とりあえず、アニメーションなどは必要なかったので

最低限の配置のみを指定しました。

スポンサードリンク