Xlune::Blog

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

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

Demo

• Demo Index

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

Download

• jquery.vgrid.0.1.6.min.js (compressed: 20100713)
• jquery.vgrid.0.1.6.js (normal: 20100713)

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

更新情報

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なんだという話は置いといて、ああいうのを見てると自分も何かしなきゃと思っちゃう不思議。

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