0

サイトが読み込まれると、石積みボックスが最初に左に配置され (http://herrfischerhamburg.de/re/)、1 秒または 2 秒後に、正しいガター幅で配置されます。ページロード時に直接適切なガター幅で配置されるようにする方法はありますか?

function init_masonry(){
var $container = $('.content');
var gutter = 12;
var min_width = 250;
$container.imagesLoaded( function(){
    $container.masonry({
        itemSelector : '.box',
        gutterWidth: gutter,
        isAnimated: true,
          columnWidth: function( containerWidth ) {
            var num_of_boxes = (containerWidth/min_width | 0);
            var box_width = (((containerWidth - (num_of_boxes-1)*gutter)/num_of_boxes) | 0) ;
            if (containerWidth < min_width) {
                box_width = containerWidth;
            }
            $('.box').width(box_width);
            return box_width;
          }
    });
});

}

4

1 に答える 1

1

あなたはおそらく最も重要なビットの1つを見逃しています...

init_masonry() の呼び出しとは$container.masonry()、付属のプラグイン .imagesLoaded() でラップすることです。

ImagesLoadedは、すべての画像が完全にロードされた場合にのみ起動するプラグインです。石工がこれを行うのは、各レンガの大きさが不明なためです。あなたが取ることができる1つのアプローチは、各画像に高さと幅を設定することです（とにかく行う必要があります）。その後、imagesLoadedを使用しないでください。このようにして、石積みの初期化と配置の間に遅延が発生することはありません。

isAnimatedまた、 trueに設定する必要がありますか。デフォルトでは遅延は 750 だと思うので、これはおそらく遅延を悪化させます。

http://masonry.desandro.com/docs/animation.html

于 2012-09-24T10:32:53.570 に答える