このエントリーをはてなブックマークに追加

大きさの違う写真をきれいに並べたい、ということで、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; しておいたほうが動きが自然。

2013.07.24 投稿 2015.04.05 更新

新しい情報を追記している場合はありますが、古い情報の修正はしていません。投稿日・文中の日付を参照してください。

Recent Articles