jquery - 如何使用 jQuery Masonry 重新加载？

Question

下面的脚本淡出页面中与用户输入不匹配的图块。那部分工作得很好，但我需要砌体在它们淡出后重新对齐瓷砖。

html-

<article class='tile'>
<p class='img' style="background-image:url(images/pic_aaronb.jpg)"></p>
<h3>Tony B</h3>
<h2 class='tags'>Tony tony</h2>

<span><a href='#'>Facebook</a> &bull; <a href='#'>Twitter</a> </span>
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit. Class aptent taciti </p>
</article>

脚本-

$("#b_submit").click(function() {


        var filter_text = $('input:text').val();



        console.log(this);

    $('.tags:not(.tags:contains('+filter_text+'))').parent().fadeOut('slow');



        //alert(filter_text);

        var $wrapper = $('#wrapper');
        var $back = $('#b_reset');


        $('#b_reset').fadeIn();

        $wrapper.prepend( $back ).masonry( 'reload' );


        $( ".tile" ).promise().done(function() {
        $( "wrapper" ).masonry( " reload " );

      });


    /*var $back = $('<a href="#" id="b_reset" class="tile">Back</a>');
    $('#wrapper').prepend( $back ).masonry( 'reload' );
    */

    });

Answer 1

Masonry 最初绑定到什么选择器？

您似乎只是reload在上面的代码中调用了该方法，而实际上从未将 Masonry 绑定到一个元素。

以前的某个地方，你需要打电话给 Masonry $wrapper，像这样 -

$wrapper.masonry({
    itemSelector: '.your-brick',
    columnWidth: someVarOrNumber
});

此外，最后，您的选择器已关闭，您将其缓存为$wrapper.

$wrapper.masonry('reload',function(){
    console.log('Masonry has finished reloading.');
});

我希望更新您的选择器会有所帮助！