Question

我正在使用jquery Masonry，当我用Ajax删除DiV时，我想回忆一下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();
                    }           
                });
        }
    });

感谢您的帮助......

克里斯

Answer 1

您需要告诉砖石您正在删除它：

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

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

你还需要在删除后再次调用$ container.masonry（）以重新启动所有内容

在Ajax调用之后，Jquery Masonry更新了DIV

1 个答案: