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

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

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

masonry.jsに気付く前

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

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

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