IT

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

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

20131120_001

http://masonry.desandro.com/

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

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

<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="masonry.pkgd.min.js" type="text/javascript"></script>
<script>
$(function(){
  $('#container').masonry({
    itemSelector : '.item'
  });
});
</script>

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

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

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

<div id="container">

<div class="item"></div>

<div class="item"></div>

<div class="item"></div>

</div>

CSSはこんな感じ

<style>
.item {
  widht:200px;
  height:300px;
  margin:10px;
  float:left;
  background-color:red;
}
</style>

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

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

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

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

<img src="dummy.jpg" width="ここに横幅" height="ここに高さ" />

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

ABOUT ME
アバター
ドレッド
目標必達のために鬼努力を惜しまない個人事業主。フリーライターとWeb制作のお仕事をしています。立命館大学中退。放送大学教養学部の全科履修生。中小企業診断士とFP1級を目指してハードに勉強中。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA