リサイズイベントによって再度グリッドの引き直しをするためにコンストラクタから処理を分離した。で例によってTumblrから画像を引っ張ってくるサンプルをアップデートしたんだけど、これCSS3のMulti-Columnでよいのでは…と思って(このサンプルを思い出して)やってみたらやっぱそれでよかった(IEは10からじゃないと駄目だけど)。stonewallは左から右に要素を置いていくのに対し、Multi-Columnだと上から下なので全く同じという訳ではないが、タイル状に敷き詰めたいだけとか、上から下にレイアウトしていきたい場合にはCSSの方が良いだろうな。リサイズイベントを拾わなくても追従してくれるし。
前にも書いてたけど、やはりJavaScriptでしかできないレイアウトを実現するか、ベンダープレフィックスとかつけなきゃいけない現状のCSSよりは簡単で導入もしやすく古いブラウザの問題も解消する方向を検討したい。
グリッドデザインは単にグリッド状に並んでるだけじゃなくて垂直方向の間隔も揃ってないといけないんだけど、その辺までちゃんとやろうとするとすごく大変。
Preserving vertical rhythm with CSS and jQuery
レイアウトに関しては今回のMulti-ColumnやFlexible Boxとか色々遊べそうなので追っていきたい。
