jQuery でグリッドレイアウト

情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。プラグイン・タグ、いずれもワードプレス・PHPのバージョン等によって動作しない場合もあります。

大きさの違う写真をきれいに並べたい、ということで、Masonry を実装した。

グリッドレイアウトにしたい親要素と並べたい子要素、グリッドの最小幅を指定するだけで、案外簡単だった。
ただ、最新版はIE8以降対応なので、IE7・6でも動かしたい場合はhttps://github.com/desandro/masonry/archive/v2.1.08.zip を使用せよ、とのこと。

http://isotope.metafizzy.co/ はIE7でも動いたのだが、一緒に動かしたい他のスクリプトで不具合があったので、今回はMasonry v2.1.08 で。

テーマへの実装は、サムネイルサイズを必要なだけ用意し、ラジオボタンでサイズを選択、選択によりサムネイルサイズを分岐。
子要素はfloat:left; しておいたほうが動きが自然。