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();
}
});
}
});
ご協力いただきありがとうございます...
クリス