jQuery的砌体追加与“负载更多的” Ajax调用

Question

我的目标=检索通过AJAX，显示n在页面加载幻灯片的项目列表，然后追加n项与“负载项的每一​​次点击，直到所有的项目都在显示的项目这点显示类似“没有更多的左”等

我已经得到了Ajax调用并追加独立工作的项目，但需要帮助，使他们一起工作。

这里是我的Ajax调用，我已经放在一个函数调用populateBlocks内：

function populateBlocks(position,page_size) { 

$.ajax({ 
    type: "GET", 
    url: "/portfolio.xml", 
    dataType: "xml", 
    success: function(xml) { 
     var title, url, block_count; 
     block_count = $(xml).find('block').length; 
     $(xml).find('block').slice(position,position+page_size).each(function(){ 
     title = $(this).find('title').text(); 
     url = $(this).find('url').text(); 
     $('div.section').append('<div class="item"><a href="' + url + '"><img src="' + url + '" alt="" /><span class="title"><span class="text">' + title + '</span></span></a></div>'); 
     }); 
     $('.section').masonry('reload'); 
    } 
    });  
} 

这里还有什么是装在文件准备，包括处理程序“负荷项目”点击：

$(document).ready(function() { 

var position; 
var page_size; 

populateBlocks(0,9); 

    $('#append2').click(function(position){ 
    $boxes = populateBlocks(9,9); 
    $('#container').append($boxes).masonry('appended', $boxes); 
    }); 
}); 

我知道代码可能是各种各样的错误。我正在尝试使用函数参数，并在点击后增加位置和page_size变量，但无法获得任何快乐。

Answer 1

试图取代这一行：

$('#container').append($boxes).masonry('appended', $boxes); 

与此：

jQuery("#content").append($boxes).masonry('reload');