我的ajax代码有问题。我从jsfiddle.net
创建了 DEMO在这个演示中,您可以看到它正常工作的网格系统。但是当你点击按钮加载更多帖子时,问题就会出现在那个时候。
我的代码有什么问题?在这方面,任何人都可以帮助我吗?
$(document).ready(function() {
function loadMore() {
$('.posts-holder').append('<div class="kesif-gonderi-alani" style="height:300px; background:blue;">6</div>');
$('.posts-holder').append('<div class="kesif-gonderi-alani" style="height:300px;">7</div>');
$('.posts-holder').append('<div class="kesif-gonderi-alani" style="height:300px;">8</div>');
$('.posts-holder').append('<div class="kesif-gonderi-alani" style="height:300px;">9</div>');
$('.posts-holder').append('<div class="kesif-gonderi-alani" style="height:300px;">10</div>');
}
function ajax() {
// fake request
setTimeout(function(){
loadMore();
test();
},1500);
}
$('.button').bind('click', function(e){
e.preventDefault();
ajax();
});
function test(){
var $container = $(".posts-holder");
$container.imagesLoaded(function() {
$container.masonry({
columnWidth: ".kesif-gonderi-alani",
itemSelector: ".kesif-gonderi-alani"
});
});
}
test();
});
答案 0 :(得分:2)
使用jQuery one的Masonry append
方法。
我已在您的fiddle函数loadMore
上传。
function loadMore() {
var $items = $('<div class="kesif-gonderi-alani" style="height:300px;">6</div><div class="kesif-gonderi-alani" style="height:300px;">7</div><div class="kesif-gonderi-alani" style="height:300px;">8</div><div class="kesif-gonderi-alani" style="height:300px;">9</div><div class="kesif-gonderi-alani" style="height:300px;">10</div>');
$('.posts-holder').append($items)
// add and lay out newly appended items
.masonry('appended', $items);
}
Masonry的append
方法需要一个jQuery对象。因此,在真正的ajax调用中,您将创建这些新对象并将它们作为参数放在append
方法中。