可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js)

なんだか可変グリッドレイアウトがまた流行ってる（？）ようなので、jQueryプラグイン書いてみた。
一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。

Demo

利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね)

Download

利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。

更新情報

v0.1.8 (20120421)

display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。

demo009を追加
v0.1.7 (20111110)

複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。

demo008を追加
v0.1.6 (20100713)

コメント等でいただいた、画像ブロックのレイアウトが崩れる現象の回避機能を実装しました。
下記の回避方法のどちらかをお試しくださいませ。

  1. "img"タグに"width","height"属性を正しく指定する。(推奨)
  2. vgridのオプション"useLoadImageEvent"を"true"に設定する。(DEMO)

画像ブロックレイアウトの崩れは、画像サイズの確定が画像読み込み後(レイアウト計算後)になるのが原因なので、あらかじめ静的に画像サイズを指定しておくか、オプションによって画像読み込み完了時に再描画を発生させるか、という対応になります。

demo007を追加
v0.1.5 (20100306)
コメントでいただいたバグをfixしました。
若干最適化しました。
v0.1.4 (20100225)
再配置のstart/finishイベントを設定できるようにしました。
demo006を参考にしてください。
v0.1.3 (20100217)
vgrefreshがvgsort内容もリフレッシュしちゃうのを修正
一応、フォントサイズ変更のリフレッシュトリガーを足してみた
v0.1.2 (20090909)
vgrefresh/vgsort関数のサンプル追加
サンプルインデックスを追加
v0.1.1 (20090907)
fadeInオプションを追加
コンテナボックスのリサイズ処理を変更
demo004を追加

Todo

  • グリッドの横幅がバラバラだと綺麗に並ばない
  • 並びにスペースの無駄ができる場合がある
  • クロスブラウザ/マルチプラットフォームで要確認
  • vgrefreshはvgsort内容もリフレッシュしちゃう
  • IEが重い

修正したらTwitterで流すようにします。興味のある方はフォローしてね。

まとめ

昨日PHPカンファレンスのUSTREAM見ながら書いてた。なぜPHPカンファレンスでJSなんだという話は置いといて、ああいうのを見てると自分も何かしなきゃと思っちゃう不思議。

--
最近、無音だと逆に作業に集中できないパターンに入ってる。