使用AJAX的jQuery砌体

Question

我正在使用jQuery插件“Masonry”（http://masonry.desandro.com/）对一些DIV进行排序。这些DIV加载了AJAX，并且不知何故，插件启动得太早，导致位置错误。 如何在这些功能中设置适当的延迟？

function loadALLtheposts(id) { 
$.ajax({ 
    url: "******.php", 
    data: {userID: id}, 
    type: "POST", 
    dataType: "text", 
    contentType: "application/x-www-form-urlencoded; charset=utf-8", 
    success: function (data) { 
     $('#timeline-posts').html(data); 
     masonry_index(); 
    } 
}); 
} 

function masonry_index() { 
$('#timeline-posts').masonry({ 
    itemSelector : '.post-wrapper', 
    columnWidth : 266 
}); 
} 

在此先感谢您。

Answer 1

你应该使用标准DOM事件 - DOMSubtreeModified（不建议使用）

$("#timeline-posts").bind("DOMSubtreeModified", function() { 
    masonry_index(); //this is called only after the #timeline-posts changes. 
    $(this).unbind('DOMSubtreeModified'); //if required do this 
}); 

使用MutationObservers代替。

var target = $('#some-id'); 
var observer = new MutationObserver(function(mutations, observer) { 
    //mutation occured 
    masonry_index(); 
}); 
var config = { attributes: true, childList: true, characterData: true }; //there are others that you can choose. Follow the link above. 
observer.observe(target, config); 
//if you want to stop observing 
observer.disconnect(); 

请注意，非上述代码已经过测试。 :)。其他可能有用的SO链接 - link,link