javascript - 香草砌体 + JQuery 翻转

Question

我正在使用 Vanilla Masonry 运行带有块墙的 RoR 应用程序，并且可以使用 JQuery Flip 翻转这堵墙中的每个块！插入。问题是块每一侧的内容长度可能不同，所以我希望在每次翻转动作后重新加载墙壁位置，以避免重叠。

我的代码单向工作，当我第一次翻转块时，但是当我恢复翻转时，我遇到了重叠。

我在加载时初始化 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();
    }
});

});

这里是三个步骤：

拜托，你能告诉我我做错了什么。多谢你们。

Answer 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 可以为您省去一些麻烦，因为它可以嵌入到头部。