ぶろぐ

日記です

グリッドデザイン

JavaScript PHP

fuelphpで遊んでたら、見た目をグリッドデザインにしたい欲が高まってきたので、jquery.masonryを試してみました。
http://www.takuan.me/lab/grid.php



グリッドデザインを適用するjQueryライブラリは、ぐぐってみるといくつか出て来ました。
いくつか触ってみましたが自分的にはjquery.masonryがしっくりきました。
http://masonry.desandro.com/docs/intro.html にあるように

  • グリッドにする要素がdiv要素なのがいい。他のもdivいけると思うけど。
  • グリッドにする要素間のマージンなどをcssで指定できるのがいい。他のも指定できそうだけど。

ちょっとハマった

画像のサイズを指定しないと上手くグリッドが動かないorz
以下の様な感じで重なる。
http://www.takuan.me/lab/grid_fail.php

うわめんどくせ

と思いましたが、getimagesizeで画像のサイズを取得できる様なのでそれをimgの属性に設定してあげる事にしました。

$image_url = "http://dummyimage.com/200x150"; 
list($width, $height) = getimagesize($image_url);
echo "<img width='${width}' height='${height}' src='${image_url}' />";

んーわざわざ画像のサイズを求めてる。ちょっと無駄なことしているような気がする。皆さんこういう時どうやっているんでしょうか。
CSSで解決できたりしますか。

と思いきや！

画像の読み込みが完了した後にウィンドウサイズを変更し、Gridが組変わるような操作を行うと期待どおりの動きをした。
画像の読み込みが完了しないと要素のサイズが確定しないので、最小のサイズでgridの計算をしてしまうのが問題っぽい。
ならなら

  • 画像の読み込みが完了したらもう一度gridの計算処理走らす
  • 画像の読み込みが完了した時にgridの計算処理を走らせる。
  • いやいや、読み込みが完了する前にレイアウトが決まっている方が見た目のストレス(遅延)が少ない。画像のサイズ指定しよう。

のどちらかで対応OKっぽい。

読み込みが完了を契機に処理(追記)

$(window).load(function(){});の中に書けばおｋ