[JS]Pinterestっぽいサイトを作れるjQueryプラグイン「jQuery Masonry」
スポンサード
以下のサイトより jQuery Masonry ファイル一式をダウンロードします。
タイル状に並べる要素を
imagesloaded ファイルのダウンロードはこちらから。
jquery ファイルや jQuery Masonry ファイルと一緒に、imagesloaded を設置します。
ざっくり組んだデモなので…イメージだけでも参考いただければと思います。
jQuery Masonry のデモ
細かいことを言えば、スマホでサイトを見た時には Masonry を実行しない処理を入れておくとか、レスポンシブWEBデザイン対応周りで色々ありますが、その辺のカスタマイズは私もまだ分からないコトが多いので、もちっと勉強してから補足記事を書こうと思います。
スポンサード
Pinterest風のタイルを敷き詰めたようなレイアウトを実現するために、jQueryプラグインの「The Wookmark jQuery plugin」を使う方法は以前にも紹介させていただきましたが、やはり「jQuery Masonry」の方が有名かな。
と言うことで、基本的な使い方になりますがザックリとご紹介。
公式サイトでも多数のデモが掲載されている通り、画像中心のギャラリーやポートフォリオ以外でも、色んなサイトに対応しやすい万能なプラグインだと思います。
目次
jQuery Masonry プラグインのダウンロード
以下のサイトより jQuery Masonry ファイル一式をダウンロードします。
jQuery Masonry ファイルの設置
jquery ファイルと一緒に jQuery Masonry のファイルを設置します。1 2 3 4 5 6 7 8 9 | <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
にします。1 2 3 4 5 6 7 | <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 を設置します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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
で調整することもできます。1 2 3 4 5 6 7 | .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デザイン対応周りで色々ありますが、その辺のカスタマイズは私もまだ分からないコトが多いので、もちっと勉強してから補足記事を書こうと思います。
スポンサード
「スマホでサイトを見た時には Masonry を実行しない処理を入れておく」のはなぜですか?
ありがとうございます。WEBアンテナ管理人です。
ご指摘の点についてですが、当ブログのように、スマホで見たときに記事を1列に並べる というレイアウトが前提ですが、
この場合、Masonryを使わなくても、CSSだけで記事を1列に並べることができるからです。
※スマホでも、PCサイトで見る時と同様にタイル状のレイアウトをしたい場合には、Masonry は使えると思います。