複数のブロック要素をタイル状に並べてくれる「jQuery Masonry」の紹介

横並びに並んだ複数のボックス要素を綺麗にタイル状に敷き詰めてくれる、JavaScriptのライブラリ「Masonry」の紹介です。公式サイトは以下のページでご覧ください。

20131120_001

http://masonry.desandro.com/

ライブラリのダウンロードもリンク先のページでどうぞ。リンク先のページにアクセスして、ブラウザの横幅を変化させると、画像がおしゃれに動きますよ!! ちなみにリンク先のページにはjQueryのプラグインとしてではなく、ただのJavaScriptのライブラリとしても動作すると書いてありますが、ここではjQueryを使用した例を紹介することにします。

それではさっそく使ってみましょう!
まずはjQuery本体とmasonryのライブラリの読み込みからです。

こんな感じです。この例ではまず、id名containerというボックス要素を用意し、その中にクラス名がitemという複数のボックスを入れて横並びに並べるようにします。
masonryというメソッドの中身にライブラリのオプションをいろいろ設定することができます。
詳しくは公式サイトのOptions解説ページをご覧ください。

http://masonry.desandro.com/options.html

HTMLの方はこのように書きます。

CSSはこんな感じ

並べたいボックス要素をfloat:left;でフローティングさせるのがポイントでしょうか。

サンプルのページを作ったのでご覧ください。

リンク先のサンプルではそれぞれのボックス要素の幅や高さを少し変えてあります。ページを開いてブラウザの横幅を変化させると、それぞれのボックスがブラウザの幅の変化に合わせて並び変わります。

ボックス要素の中にimgタグで書かれた画像を設定しギャラリーページのようにしたい、という人もいると思いますが、ページを開いたときにボックスがつぶれてしまうという場合があるそうです。これはライブラリの側でボックス要素の幅と高さがちゃんと計算されていないのが原因です。その場合、

このようにimgタグにwidthとheightを設定するとうまくいくと思います。


この記事をかいた人

ドレッド Webクリエイター

WordPressの構築やjQueryによる動的サイトの実装が得意なWebクリエイターです。このブログではWeb制作で役に立ちそうな知識から、プライベートの出来事まで幅広いネタを取り扱っております。ご質問、ご要望はお問合せフォームからどうぞ! お仕事のご依頼はコレカラウェブへ! 2016年10月から放送大学に入学(選科履修生)

jQuery | Posted on 2013/11/20 19:30

※コメントは管理人の承認後に公開されます。

コメントを残す

メールアドレスが公開されることはありません。