删除项目时刷新 jquery.masonry答案

【问题标题】：Refresh jquery.masonry when deleting an item删除项目时刷新 jquery.masonry
【发布时间】：2011-03-05 21:43:17
【问题描述】：

当通过 Ajax 删除项目时如何刷新 Masonry？这是我用来删除项目的代码：

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;           
    });
}

我想要刷新的原因是消除删除项目后产生的空格。

【问题讨论】：

请考虑选择正确的答案。
Reorganize all element's after hiding a element using jquery masonry的可能重复

标签： jquery jquery-masonry

【解决方案1】：

向您的fadeOut() 添加回调，以便在您删除的元素淡出后实际调用.remove()，然后再次在容器上调用.masonry()。

【讨论】：

感谢这个有用的提示。适合我的项目。

【解决方案2】：

我会说只是在选择器上再次调用它。好像有a check看看有没有被再次调用。

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

~~我也推荐 saveOptions 设置，因为它似乎支持重新调用。~~没关系，它似乎默认这样做（D'oh！）

【讨论】：

我尝试再次调用它，使用它，但没有效果： $('.masonry-wrapper').masonry({ columnWidth: 188, singleMode: true, itemSelector: '.item' } );

【解决方案3】：

在淡出回调中再次调用 masonry。让你自己轻松，并在函数中进行砌体初始化。在那里定义您的选项，这样您就不必将选项带入您的回调范围。

像这样

$(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;           
    });
 }
});

【讨论】：

【解决方案4】：

jquery masonry 本身有一个 remove 方法 (http://masonry.desandro.com/methods.html#remove)

你可以把它放在你的 fadeOut 回调中：

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

【讨论】：