皆さんこんばんわ！バジラです！
今回はですね、webデザイナー御用達・ピンタレスト風レイアウトが簡単に作れるmasonry.jsの使用法をご紹介します！ピンタレストよろしく、ブラウザサイズを小さくすればカラムが落ちて、画像の高さを問わずいい感じのレイアウトに収めてくれる便利なものです！
画像ギャラリーだとか、サムネイルありでの投稿記事の一覧などに使用すると動きのある面白いページになりそうです！引き出しの一つとして覚えておいて損は全くないので、是非ご覧くださいな！
使用するプラグインはこちら！
masonry.jsこちらのmasonry.jsを使います！
おすすめのDL方法は右上にある「Download masonry pkgd.min.js」のボタンをクリックしますと、ぶわーっとソースが出てきます！
それを丸っとコピペして、任意のjsファイルや既存のjsファイルに張り付けましょう！結構コード量が多いんで、僕は、わかりやすくmasonry.jsってファイルを作ってそこに貼ってます！
んでもってhead内で読み込み！これでmasonryを使用する準備はOK！簡単ですね！
そしてコードだ！
js
(function($) {
$(window).on('load',function(){
$(".hoge").masonry({
columnWidth: '.hoge_child', //ベースになるコンテンツ幅を指定。今回はクラスを記述。数値も可
itemSelector: '.hoge_child', //タイル状に配置するコンテンツを指定
gutter: '.bet',//隙間
percentPosition: true, //タイル状に配置するコンテンツ幅をパーセントで指定するか否か
isAnimated: true, //ブラウザの幅に毎にコンテンツが移動する際アニメーションするように指定
});
})
})(jQuery);更なるオプションはこちらから！
html
<section class="hoge">
<div class="hoge_child">
<img src="画像のURL"">
</div>
<div class="bet"></div>
<div class="hoge_child">
<img src="画像のURL"">
</div>
<div class="bet"></div>
<div class="hoge_child">
<img src="画像のURL"">
</div>
<div class="bet"></div>
<div class="hoge_child">
<img src="画像のURL"">
</div>
</section>CSS
.hoge_child {
width: 100%;
max-width: 180px;
margin-bottom: 10px;
}
.bet {
width: 10px;
}こんな感じですね！
jsのコメントアウトを見てもらえればわかると思いますが、比較的簡単に実装できると思います！
ポイントとしては、「.hoge_child＋.bet」で1カラムと考えて1カラムの横幅を決めることですかね！余白分まで含めての横幅計算をするといい感じになります！
この後に見てもらうサンプルは、コンテンツ幅は最大800px(PC時)に対し、大体4カラムを想定、子要素の「.hoge_child」にはmax-width:190px、下にも余白が欲しいのでmargin-bottom: 10px;、余白の「.bet」にwidth:10pxを入れています！
もう後は見てもらえばって感じです！もちろんjqueryのプラグインですので、jqueryを読み込ませるのは忘れないでくださいね！
.hoge_childにmax-widthを％で設定するとカラム落ちがしなくなるので注意！！
サンプルはこちら
ブラウザサイズを伸ばしたり縮めたりするといい感じにレイアウトを設定してくれますよね！！
マジでかっこいいっすね！！マジ便利！
まとめ
はい！いかがでしたでしょうか！？今回はSPへの対策を行っていないので、クライアントワークやしっかりこだわりたい場合は、SP時のCSSも作成しておきましょう！
使える場面は決して多くはないですが、簡単にスタイリッシュな空気感をアーカイブ系のレイアウトに実装できるというのは、いざとなった時の手助けにもなります！
横幅だけならcssだけでもいろいろとできますが、縦に詰めるっていうアクションは中々面倒くさいです！それをうまい事解決してくれているので、正直なところギャラリー系のページを作成する際は、これさえ入れときゃ無敵な感じさえあるプラグインですわ！
皆さんもガシガシと使いましょう！
それでは今回はこの辺で終わりにしようと思います！それではー(^q^)ﾉｼ
