投稿

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

jquery

可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js)を某プロジェクトで使わせていただいています。
用途としては、固定幅のコンテンツなんで可変である必要はないんですが、リロードするたびにランダムに並び順が変わるという効果として使っています。
　
こういう固定幅のコンテンツの場合、再描画で各画像のポジション計算が狂って上の方に重なって表示される場合があります。（easingのパラメータの調整で出にくくすることもできますが、完全に出ないわけではありません）
たぶん、ウィンドウサイズが変わった場合の再描画では問題がないのでしょうから、ウィンドウサイズが変わらないような状況で使っている方が悪いのですが、たまにでも、画像が上の方に重なるといろいろ不都合が。（「表示上の問題なんです、F5キーを押してください」と言いたいところですが、見た目、いかにもなにか重大なバグが発生したように見えて、結構厳しいです）
　
初期化のあと、すぐ vgrefresh() してみたり、vgsort() してみたり、あと、一緒に動く JSがあるとそうなる頻度が上がるので、後ろの方にずらしてみたりしたんですが、なかなかこれといった対策もなく。
外そうかなと思った瞬間、パッと思いつきました。

#grid-content {
  display:none;
  display:block\9;	/* IE7, IE8 */
  overflow:hidden;
  height:0;
  margin-left:-1px;
}

「最初は消しときゃええやん」と。これでばっちりです。IEだけは消しとくとほんとに出てこなくなりましたので、出しときました。
作者さま、ありがとうございました。

追記：これだとページ内ジャンプのとき、やっぱり表示できないケースがありました。なので、上のIE対応は止めて、基本表示しないで別のタイミング（他のJSが動くとき）、これ（↓）を入れることにしました。

$("#grid-content").css('display', 'block');

なんか泥縄式になっているような気がするのは気のせい？
再追記：これでもうまくいかないことがあったので、更に vgrefresh() を足しました。いよいよ泥縄（泥船）です。

$("#grid-content").css('display', 'block');
$("#grid-content").vgrefresh();

ちなみにランダムの方は上流（コンテンツを準備する側）でやることにしました。

query_posts('category_name=top&posts_per_page=-1&orderby=rand');

posts_per_page=-1 は無制限、orderby=rand が並び順ランダムです。

/作成者: