0

我正在使用 jquery Masonry，当我使用 Ajax 删除 DiV 时，我想回忆一下 Masonry。我尝试了下面的代码，但这不能按预期工作！我可以使用哪个 Masonry 功能来更新我的项目？

我的标记：

<div id="success" style="margin:0 0 200px 140px">
<div id="containerPost">
    <div id="post79" class="item" style="width:500px;margin:5px;padding:5px;background:#F5F5F5;">
        <div style="z-index:999;width:490px;margin:0 auto" class="bottomImg">
            <p style="padding:5px 5px">
                <span style="line-height:24px;margin:0;padding:0">
                    <a href="javascript:void(0)" class="delPost lsf-icon delete" data-action="del" data-id_user="1" data-id_post="79">delete</a>
                </span>
            </p>
        </div>
    </div>
</div>
...

jQuery

        var $container = $('#containerPost');
    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.item'
      });
    });


    $(document).on("click", "a.delPost", function(){
        if( confirm('Are you sure you want to delete this post ?') ) {
                var $this = $(this);
                var id_user = $this.attr('data-id_user');
                var id_post = $this.attr('data-id_post');
                var action = $this.attr('data-action');
                var myPostData = JSON.stringify({'id_user':id_user,'id_post':id_post,'action':'del'});
                var myPostData = JSON.parse(myPostData);

                $.ajax({
                    type : "POST",
                    url : "../include/test.inc.php",
                    data : myPostData,
                    dataType: 'json', 
                    success : function (data) {
                        if ( data.success == 'ok' ) {
                            $('#post'+id_post).fadeOut('slow');
                            $.pnotify({
                                type: 'success',
                                history: false,
                                delay: 5000,
                                title: 'Success',
                                text: data.message
                            });                             
                            // Masonry : This is may be not right !!!
                            var $container = $('#containerPost');
                            $container.masonry({
                                itemSelector : '.item'
                            });
                            // End Masonry
                        }
                    },
                    error : function (xhr, ajaxOptions, thrownError) {
                        //alert(xhr.status);
                        //alert(thrownError);
                    },
                    complete: function(){
                        //location.href = 'test.php';
                        //location.reload();
                    }           
                });
        }
    });

谢谢你的帮助...

克里斯

4

1 回答 1

0

您需要告诉 masonry 您正在删除它：

 $container.masonry( 'remove', elements );

http://masonry.desandro.com/methods.html#remove

您还需要在删除后再次调用 $container.masonry() 以重新布局所有内容

于 2013-07-22T18:17:02.980 回答