0

私はVanillaMasonryを使用してブロックの壁でRoRアプリケーションを実行しています。この壁の各ブロックは、JQueryFlipで反転できます。プラグイン。問題は、ブロックの両側のコンテンツの長さが異なる可能性があることです。そのため、オーバーラップを避けるために、各フリップアクションの後に壁の位置をリロードする必要があります。

初めてブロックを反転すると、コードは一方向で機能しますが、反転を元に戻すと、オーバーラップが発生します。

ロード時にMasonryを初期化します。これが、flipping-wall.jsのコードです。

$(document).ready(function(){
    $('.sponsorFlip').bind("click",function(){
            var elem = $(this);
    var wall = new Masonry( document.getElementById('container'), {
                    gutterWidth:5,
                    isFitWidth: true
                  });

    if(elem.data('flipped'))
    {
        elem.revertFlip();
        elem.data('flipped',false);
                    wall.reload();  
    }
    else
    {
        elem.flip({
            direction:'lr',
            speed: 350,
            onBefore: function(){
                elem.html(elem.siblings('.sponsorData').html());
            }
        });
        elem.data('flipped',true);
        wall.reload();
    }
});

});

これが3つのステップです：

ここに画像の説明を入力してください

ここに画像の説明を入力してください

ステップ3

何が間違っているのか教えてください。みんなありがとう。

4

1 に答える 1

1

私が知る限り（ローカルホストでテスト済み）、反転が完了したら、（さらに別のインスタンスを作成するのではなく）すでに初期化されている Masonry オブジェクトを参照して再ロードする必要があります。

これは次のようになります (onload 関数の代わりに配置します)。

$(window).load(function() {
    // initialize Masonry - later on you will refer to this wall variable
    var wall = new Masonry( document.getElementById('container'), {gutterWidth:5, isFitWidth: true});

    $('.box').click(function() {
        var elem = $(this);

        // data('flipped') is a flag we set when we flip the element:

        if(elem.data('flipped'))
        {
        // If the element has already been flipped, use the revertFlip method
        // defined by the plug-in to revert to the default state automatically:

        elem.revertFlip();
        // Unsetting the flag:
        elem.data('flipped',false);    

        }
        else
        {
        // Using the flip method defined by the plugin:

        elem.flip({
            direction:'lr',
            speed: 350,
            onBefore: function(){
                // Insert the contents of the .sponsorData div (hidden
                // from view with display:none) into the clicked
                // .sponsorFlip div before the flipping animation starts:

                elem.html(elem.siblings('.box').html());
            }
        });

        // Setting the flag:
        elem.data('flipped',true);

        }
            // reload already existing Masonry object
        wall.reload();
    })
})

PS jQuery Masonryを使用すると、頭に埋め込むことができるため、手間が省けます。

于 2012-08-03T11:06:24.980 に答える