— marex blog

marex / model

以前からjquery.masonry.jsみたいなレイアウトが実現できる実装方法が気になっていたので今回ざっくりjQueryプラグインとして作ってみた。本家のように複雑なことはできない。簡単なレイアウトだけのプラグイン。ソースが気になる方は下記から。
ソース : jquery.gridlayout.js

最近、一番重要視しているアウトプットのスピード。今回作ったプラグインに関して現段階でIEとかどうでもいいし、見た目が崩れていてもどうでもいいし、コードが汚いとかどうでもいいっす。今後、そのへんを徐々にブラシュアップ出来ればと考えている。と言っても、IEでもチェックはもちろんしているので変なことをやらなければ崩れたり変なことになったりしないと思う。

すごい基本的なことかもしれないけど、レイアウトを行うときに下記のようにfor文内で位置の計算と配置を同時に行うと処理時間が長くなる。
(このソースは初期状態のものであって最新のものではない、まただいぶ処理を端折っている)

// do the layout.
for (i = 0; i < max; i++) {
    // get items top position.
    var tmpTop = heightList[pointer];

    // move item.
    $(this.items[i]).css({
        position: 'absolute',
        top     : tmpTop +'px',
        left    : ( leftStart + (this.itemWidth + this.options.offset) * pointer ) +'px'
    });
    // stock height.
    heightList[pointer] = tmpTop + $(this.items[i]).outerHeight() + this.options.offset;
}
this.$elem.height( Math.max.apply(null, heightList) - this.options.offset );

上記を下記のように位置を計算するfor分と配置するfor文を分けたほうが処理時間が短くなった。

// do the layout.
for (i = 0; i < max; i++) {
    // get items top position.
    var tmpTop = heightList[pointer];

    // Stock position
    posList.push( { top: tmpTop, left: leftStart + (this.itemWidth + this.options.offset) * pointer} );

    // stock height.
    heightList[pointer] = tmpTop + $(this.items[i]).outerHeight() + this.options.offset;
}
this.$elem.height( Math.max.apply(null, heightList) - this.options.offset );

this.items.css({ position: 'absolute' });

for (i = 0; i < max; i++) {
    $(this.items[i]).css({
        top     : posList[i].top +'px',
        left    : posList[i].left +'px'
    });
}

参考になるかわからないし、環境によってもだいぶ違うのだろうけど、
空のdivが500個ある状態でIE6〜8でチェックした時に、処理時間がだいたい 1700ms → 90ms くらいまでになった。