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