jQuery Masonry 使用“加载更多”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 );
  });
});

我知道代码可能有各种错误。我正在尝试使用函数参数，并在单击后增加 position 和 page_size 变量，但没有任何乐趣。

Answer 1

尝试替换这一行：

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

用这个：

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