0

だから私は、jQuery Masonry グリッドの現在の幅にサイズ変更するヘッダーを作成しようとしています。

私の実際の例はここにあります: http://jsfiddle.net/hGnLH/

私はこのサイトに同様の影響を与えようとしています: http://citizenmag.citizenm.com/ (私は、ヘッダーを Masonry グリッドと同じ幅にし、ユーザーがブラウザーの幅を変更したときにサイズを変更したい)

どんな助け/提案も大歓迎です。

4

1 に答える 1

1

結局、それほど複雑ではありません。あなたのフィドルのこの更新を見てください。

関連するJSは次のとおりです。

$(function() {
    $("#inner").masonry({
        columnWidth: 230,
        gutterWidth: 15,
        isAnimated: true,
        cornerStampSelector: ".corner-stamp"
    });

    $(window).resize(function() {
        var totalColWidth = $("#inner").outerWidth() - 475;
        var columns = parseInt(totalColWidth / 245);

        $("#header").animate({width:(columns*245) + 475},{duration:300, queue:false});

    });
});

ウィンドウのサイズ変更では、「列部分」の幅を計算します。つまり、#inner幅から大きな画像の幅を差し引いたものです。これで、これをマンソンリーの柱の幅と溝の幅で割ることで、柱の数を得ることができます。列番号があれば、それに 245 (Masonry 列幅 + ガター幅) を掛けて、予想されるヘッダー幅を取得できます。ヘッダーをアニメーション化して完了です。

于 2011-11-04T16:37:36.770 に答える