CSS3で追加されたbackground-sizeプロパティに、contentかcoverを指定すると画像をウィンドウいっぱいに表示してくれるので、写真をでかく見せたい場合に使えそう。
Perfect Full Page Background Image
JavaScriptで切り替えられるようにしてみた。Chrome推奨です。
動作サンプル
https://gist.github.com/3473035
addEventlistenerのとこ、以前だったら何も考えずimg要素それぞれにイベントリスナーを登録してしまっていたけど、バブリングを利用するようにした。
How JavaScript Event Delegation Works
ステートフルJavaScriptで出てきた。
現状だと画像をそのまま引き延ばすので元データの解像度が低いと荒れてしまう。最大表示する際に画像を差し替えるなど工夫が必要。シンプルに使えるようにライブラリ化しておきたいところ。
リサイズイベントによって再度グリッドの引き直しをするためにコンストラクタから処理を分離した。で例によってTumblrから画像を引っ張ってくるサンプルをアップデートしたんだけど、これCSS3のMulti-Columnでよいのでは…と思って(このサンプルを思い出して)やってみたらやっぱそれでよかった(IEは10からじゃないと駄目だけど)。stonewallは左から右に要素を置いていくのに対し、Multi-Columnだと上から下なので全く同じという訳ではないが、タイル状に敷き詰めたいだけとか、上から下にレイアウトしていきたい場合にはCSSの方が良いだろうな。リサイズイベントを拾わなくても追従してくれるし。
前にも書いてたけど、やはりJavaScriptでしかできないレイアウトを実現するか、ベンダープレフィックスとかつけなきゃいけない現状のCSSよりは簡単で導入もしやすく古いブラウザの問題も解消する方向を検討したい。
グリッドデザインは単にグリッド状に並んでるだけじゃなくて垂直方向の間隔も揃ってないといけないんだけど、その辺までちゃんとやろうとするとすごく大変。
Preserving vertical rhythm with CSS and jQuery
レイアウトに関しては今回のMulti-ColumnやFlexible Boxとか色々遊べそうなので追っていきたい。
縦方向の並びもテスト書いて通した。element.style.heightで要素の高さを取得しようとしていたのが間違いで、element.offsetHeightが欲しかったのだった。
ひとまずこれでNNNNYのサイトでやっているような並べ方の基本の部分はできた。exampleで実際に動きを確かめてみたいのだけど、いい方法を考えている。
