Pinterest風のタイルを敷き詰めたようなレイアウトを実現するために、jQueryプラグインの「The Wookmark jQuery plugin」を使う方法は以前にも紹介させていただきましたが、やはりjQuery Masonryの方が有名かな。
と言うことで、基本的な使い方になりますがザックリとご紹介。
公式サイトでも多数のデモが掲載されている通り、画像中心のギャラリーやポートフォリオ以外でも、色んなサイトに対応しやすい万能なプラグインだと思います。
jQuery Masonry プラグインのダウンロード
![[JS]Pinterestっぽいサイトを作れるjQueryプラグイン「jQuery Masonry」](https://webantena.net/wp-content/uploads/2013/02/masonry01.png)
以下のサイトより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ファイルのダウンロードはこちらから。
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 は使えると思います。