• 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 のファイルを設置します。



HTML のサンプル

今回はタイル状に並べるコンテンツの親要素を #contents
タイル状に並べる要素を .box にします。



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

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

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

jquery ファイルや jQuery Masonry ファイルと一緒に、imagesloaded を設置します。

オプションはサイトに合わせて追加変更してみてください。


transition-duration で動きの微調整

ブラウザ伸縮によるアニメーションですが、オプションの isAnimated: false にする替わりに、CSS3 の transition-duration で調整することもできます。


デモページと補足

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

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

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



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

コメント

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

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

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

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

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

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください