我如何使用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绑定到元素。

之前的某个地方，您需要在$wrapper上调用Masonry，就像这样 -

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

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

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

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