自動整列プラグインjQuery masonry

jQuery

jQuery

前回、カテゴリー一覧を作った話の続きです。

カテゴリーごとに<div>で囲むことはできたんですが、

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

カテゴリーボックスの高さがバラバラ

そのため、floatなど使っても上手くレイアウトができない…

そこで、

【jQuery masonry】というプラグインをいれました。

スポンサードリンク

自動整列プラグインjQuery masonryとは

これは理想に近いものでした。

パスルのように高さが異なっているボックスを

上に詰めてくれて、しかも横にも詰めてくれる。

下記のような感じに自動でしてくれます。

jQuery_masonry_イメージ

jQuery_masonry_イメージ

【参考サイト】
[jQuery]自動整列プラグインjQuery masonryの設定方法・オプションまとめ

1.ファイルをダウンロードします。

jQuerymasonryは→こちらからダウンロードします。

jQuery_masonry

jQuery_masonry

このサイト自体にもjQuerymasonryが使われているので

ブラウザの幅を狭くすると

このプラグインの動きがわかると思います。

jQuery_masonry幅縮小

jQuery_masonry幅縮小

幅を狭めるとこんな感じに変わります。

ダウンロードは画像の赤枠からします。

jQuery_masonry_ダウンロード

jQuery_masonry_ダウンロード

あと、当たり前ですが、jQueryが必要になります。

jQueryは→こちら

2.headタグ内にてファイルを読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.masonry.min.js"></script>

※パスは環境に合わせる

3.前回の2で記述したものの下に下記を加える

<script type="text/javascript">// <![CDATA[
 $(function(){
 $('#container').masonry({
 itemSelector: '.box',
 columnWidth: 200 //一列の幅サイズを指定
 });
 });
// ]]></script>

4.そろえたいボックスを囲っているものに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 //ウィンドウサイズが変更された時に並び替え

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

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

スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)

新品価格
¥1,998から
(2019/9/21 06:18時点)

スポンサードリンク

コメントを残す

サブコンテンツ

このページの先頭へ