删除项目时刷新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();