刪除項目時刷新jquery.masonry

Question

如何通過Ajax刪除項目時如何刷新砌體？這是我用來刪除該項目的代碼：

if($deletes = $('a[rel=delete]')) { 
    $deletes.click(function() { 
     if(!window.confirm('Are you sure you wish to delete this picture?')) 
      return false; 
     $t = $(this); 
     $.post(
      $t.attr('href'), 
      {}, 
      function(data) { 
       if(data == "success") 
        $t.parents('.deleteable:first').fadeOut(); 
      } 
     ); 
     return false;   
    }); 
} 

我想要刷新的原因是在刪除項目後刪除產生的空格。

Answer 1

我會說只是在選擇器上再次調用它。它似乎有a check來查看它是否被再次調用。

...snip... 
    // checks if masonry has been called before on this object 
    props.masoned = !!$wall.data('masonry'); 
...snip... 

我也想建議 saveOptions設置，因爲它似乎支持它重新調用。 沒關係，它似乎在默認情況下這樣做（D'哦！）

Answer 2

添加一個回調到您​​實際調用.remove()您刪除的元素，一旦它的淡出，然後再打電話容器上.masonry()。

Answer 3

在淡出回調中再次調用砌體。讓自己變得簡單，並在一個函數中進行砌體初始化。在那裏定義你的選項，這樣你就不必將選項帶入你的回調範圍。

像這樣

$(function(){ 

    var $bricks = $('your > elements'); 

    function BuildWall(){ 
    $bricks.masonry({your:'options'}); 
    } 

    BuildWall(); 


//Your code modified 
if($deletes = $('a[rel=delete]')) { 
    $deletes.click(function() { 
     if(!window.confirm('Are you sure you wish to delete this picture?')) 
      return false; 
     var $t = $(this); 
     $.post(
      $t.attr('href'), 
      {}, 
      function(data) { 
       if(data == "success") 
        $t.parents('.deleteable:first').fadeOut(function(){ 
         //This is faster than $(this).remove(); 
         $(this).empty().remove(); 
         //Reset Masonry 
         BuildWall(); 
        }); 
      } 
     ); 
     return false;   
    }); 
} 
}); 

Answer 4

jQuery的砌體本身有一個remove方法（http://masonry.desandro.com/methods.html#remove）

你可以把這個在你淡出回調：

$("your-container").masonry('remove', $(this)).masonry();