読者です 読者をやめる 読者になる 読者になる

gaaamiiのブログ

悪気なく間違ったことを書いている時があります。コメントやTwitter、ブコメなどでご指摘ください

jQueryでPinterest風のデザインにできる「masonry.js」との出会い

先日つくったソフトテニスのニュースサイト「ソフ速」を、今回はPCでも見やすいようにリフォームしてみました。その際に使った「masonry.js」についてメモ的にエントリー。

ソフ速 - 画像メイン、さらっと流し読みできるソフトテニスニュースサイト
(2014/5/10追記)現在は公開していません。

masonry.jsに気付く前

PC向けのレイアウトで悩んだのは、フィード元の記事によって画像サイズが異なるということ。ということはみんな同じサイズに切り抜く必要があるよな、ってことで最初に「javascript 画像 トリミング」とぐぐって出てきたのは「画像編集いらず!jQueryとCSSだけで画像をトリミング&センタリングする」という記事です。
なるほど、CSSのclipプロパティというのがあるのか。これを使えばみんな同じサイズにできる!と、早速トライしてみた。けど、「どこからどこまでをトリミングすればいい感じになるのか」というのが難しく、選手の顔が鼻あたりで切れたりしちゃったら台無しだよなー、という懸念があったので諦めました。

どこかで聞いたあのjQueryプラグイン

そこで思い出したのがmasonry.jsというjQueryプラグイン。昨年の秋、なんだこれ!!「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ!!という記事をきっかけにはてブで話題になっていました。
その頃は「ほげー、jQueryなんとかっちゅう魔法を使えばこんなこともできるんだ」くらいの感想しか持たなかったし、なんだか難しそうだからスルーしてたのですが、これが今回の問題を解決するいっちばんシンプルで強力なそりゅーしょんではねえのかと気付きました。

画像をそのままでdivをしゅしゅっとする

masonry.jsを使えば、通常CSSでfloatさせたときに出来てしまう余白を埋めてくれます。さらにアニメーションも付ければ、divがしゅしゅっと整列してくれます。
f:id:shgam:20130428113557j:plain
http://masonry.desandro.com/

これが問題をどう解決してくれたかというと、「トリミングしないでもいいじゃん!」という考えになったことです。画像をそのままの大きさ・縦横比で表示してdivの高さがバラバラになっても、divが勝手に整列してくれるのですから、画像の方はいじる必要が無いのです。

関連書籍