サイト移転しました → GLOSSY

     
  1. >
  2. >
  3. クールなグリッドレ…
  • 最終更新日:
  • 投稿者: @signpostme

クールなグリッドレイアウトを簡単に実装できるjQueryプラグイン「Masonry」

タイルを敷き詰めたかのようなデザイン、「グリッドレイアウト」。これを簡単に実装することができるjQueryプラグイン、「Masonry」をご紹介します。コンテンツが1ページに大量に表示されるウェブサイトなどに有効ですね。

簡単にグリッドレイアウトを実装することができる「Masonry(メーソンリー)」

このプラグインは、簡単にグリッドレイアウトを実装することができるJavaScriptグリッドレイアウトライブラリです。
JavaScriptとjQueryに対応しており、jQueryはプラグインとして活用することができるので非常に便利です。
 
コンテンツが大量に表示されるウェブサイトなどに活用できそうなプラグインです。
 
「Masonry」公式サイト/ダウンロードページ
 
 

使用方法

「Masonry」はJavaScriptとjQueryの形式で利用することができますが、今回はjQueryを使用した例を掲載します。
また、あらかじめ「Masonry」にはオプションが設定されているので、各自目的に合わせてカスタマイズしましょう。
 
 

HTML

「Masonry」本体とjQueryを読み込んでおきましょう。
 

<script src="/path/to/masonry.pkgd.min.js"></script>

 
整列させるためのボックスを作ります。
 

<div id="container">
  <div class="item">...</div>
  <div class="item w2">...</div>
  <div class="item">...</div>
  ...
</div>

 

CSS

.item { width: 25%; }
.item.w2 { width: 50%; }

 

JavaScript

$containerに対象のボックスをまとめた親要素を指定、itemSelectorに内包されている子要素を指定します。
 

var $container = $('#container');
// initialize
$container.masonry({
  columnWidth: 200,
  itemSelector: '.item'
});

 
 

これだけで簡単にグリッドレイアウトを実装可能!

maso02こんな感じにタイル状に要素が表示されれば成功です!
 
ウィンドウサイズを小さくしたとき、要素がはみ出る場合は自動的にアニメーションをつけて可変してくれます。
CSS3 Media Queries との相性も抜群ですね。
 
なお、様々なオプションを設定することができるので詳しくはこちらを参照してください。
 

新着記事を見る

TOP