• RSS

[JS]Pinterestっぽいサイトを作れるjQueryプラグイン「jQuery Masonry」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

Pinterest風のタイルを敷き詰めたようなレイアウトを実現するために、jQueryプラグインの「The Wookmark jQuery plugin」を使う方法は以前にも紹介させていただきましたが、やはり「jQuery Masonry」の方が有名かな。

と言うことで、基本的な使い方になりますがザックリとご紹介。

公式サイトでも多数のデモが掲載されている通り、画像中心のギャラリーやポートフォリオ以外でも、色んなサイトに対応しやすい万能なプラグインだと思います。

jQuery Masonry プラグインのダウンロード

[JS]Pinterestっぽいサイトを作れるjQueryプラグイン「jQuery Masonry」

以下のサイトより jQuery Masonry ファイル一式をダウンロードします。


jQuery Masonry ファイルの設置

jquery ファイルと一緒に jQuery Masonry のファイルを設置します。
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery.masonry.min.js"></script>
<script>
$(function(){
$('#contents').masonry({ //タイル状に配置するコンテンツの親要素の指定
itemSelector : '.box' //タイル状に配置する要素のclassの指定
});
});
</script>


HTML のサンプル

今回はタイル状に並べるコンテンツの親要素を #contents
タイル状に並べる要素を .box にします。
<div id="contents" class="transitions-enabled clearfix">
<div class="box"><img src="" /></div>
<div class="box"><img src="" /></div>
<div class="box"><img src="" /></div>
<div class="box"><img src="" /></div>
<div class="box"><img src="" /></div>
</div>


imagesLoaded プラグインの併用とオプションの設定

jQuery Masonry を使ってコンテンツをタイル状に並べるに当たり、どうしてもレイアウトが崩れて上手くいかない(タイル状の要素が重なる)…なんて場合は imagesLoaded プラグインを併用することで回避できると思います。

imagesloaded ファイルのダウンロードはこちらから。

jquery ファイルや jQuery Masonry ファイルと一緒に、imagesloaded を設置します。
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery.masonry.min.js"></script>
<script type="text/javascript" src="./jquery.imagesloaded.min.js"></script>
<script>
var $container = $('#contents'); //タイトル状に配置するコンテンツの親要素の指定
$container.imagesLoaded(function(){ 
$container.masonry({
itemSelector: '.box', //タイトル状に配置する要素のclassの指定
isFitWidth: true, //親要素の幅に合わせてタイル状のコンテンツ数を自動調整
isAnimated: false //伸縮時のアニメーションの設定
});
});
</script>
オプションはサイトに合わせて追加変更してみてください。


transition-duration で動きの微調整

ブラウザ伸縮によるアニメーションですが、オプションの isAnimated: false にする替わりに、CSS3 の transition-duration で調整することもできます。
.transitions-enabled.masonry	{
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-ms-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;
}


デモページと補足

以下に jQuery Masonry のデモページを用意しています。

ざっくり組んだデモなので…イメージだけでも参考いただければと思います。
jQuery Masonry のデモ

細かいことを言えば、スマホでサイトを見た時には Masonry を実行しない処理を入れておくとか、レスポンシブWEBデザイン対応周りで色々ありますが、その辺のカスタマイズは私もまだ分からないコトが多いので、もちっと勉強してから補足記事を書こうと思います。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

  1. 「スマホでサイトを見た時には Masonry を実行しない処理を入れておく」のはなぜですか?

    1. ありがとうございます。WEBアンテナ管理人です。

      ご指摘の点についてですが、当ブログのように、スマホで見たときに記事を1列に並べる というレイアウトが前提ですが、

      この場合、Masonryを使わなくても、CSSだけで記事を1列に並べることができるからです。

      ※スマホでも、PCサイトで見る時と同様にタイル状のレイアウトをしたい場合には、Masonry は使えると思います。

コメントを残す