如何使用jQuery Masonry重新加載？

下面的腳本淡化了頁面中與用戶輸入不匹配的圖塊。這部分工作很好，但我需要砌體在淡出之後重新對齊。如何使用jQuery Masonry重新加載？

enter image description here

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'); 
    */ 

    });

來源

2013-05-10 Aaron Benjamin

什麼選擇是砌體最初必然？

您似乎只是在上面的代碼中調用reload方法，並且您從來沒有實際將砌體綁定到元素。

以前的某個地方，你所需要調用砌體上$wrapper，這樣的 -

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

而且，在最後，你的選擇是關閉的，你緩存它作爲$wrapper。

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

我希望更新您的選擇器有幫助！

來源

2013-06-28 03:47:59

如何使用jQuery Masonry重新加載？

回答

相關問題