Packey在通过AJAX加载时没有安排额外的div

Question

我正在使用packery以砖石格式排列博客文章。这对于最初显示在页面上的帖子来说很好，但当我通过AJAX加载新帖子时——当点击分页链接时——帖子只会被添加到容器中，但不会"重新打包"或以砖石格式重新排列。

我正在使用WordPress和我自己的AJAX调用，请参阅下面的代码：

// For jQuery noConflict
(function($)    {
    $(document).ready(function() {
        // Find out the page number
        var pageNumber;
        $('.custom-pagination a.page-numbers').click(function() {
            pageNumber = $(this).html();
        });
        // AJAX call to load more posts when pagination links are clicked
        $(document).on( 'click', '.custom-pagination a.page-numbers', function( event ) {
            event.preventDefault();
            page = pageNumber;
            $.ajax({
                url: ajaxpagination.ajaxurl,
                type: 'post',
                data: {
                    action: 'ajax_pagination',
                    query_vars: ajaxpagination.query_vars,
                    page: page
                },
                success: function( html ) {
                    var $container = $('#all-posts').packery();
                    $container.append( html );
                    $container.packery( 'appended', html );
                }
            });
        });
    });
})(jQuery);
// End jQuery noConflict

有人能为我指明正确的方向吗？在通过AJAX加载帖子后，如何再次调用packery以砖石格式重新排列我的帖子？

谢谢。

Answer 1

我遇到了同样的问题，并根据此处的说明在服务器端(web2py/python(处理了它：

# this function is called via ajax
def function_that_loads_the_new_content():
   ...
   new_divs = #generate new content
   new_divs_as_string = ''.join([str(x) for x in new_divs])
   # this script runs when the new content is appended to the container
   update_results = 
       "var $items = $('%s');$pack.append($items).packery( 'appended', $items );" 
        % new_divs_as_string
   return update_results

这个想法是在将新元素添加到容器元素后使用packery的附加功能。上面的脚本基本上等同于包装厂页面中提供的这个模板：

$('.append-button').on( 'click', function() {
  // create new item elements
  var $items = $('<div class="grid-item">...</div>');
  // append items to grid
  $grid.append( $items )
    // add and lay out newly appended items
    .packery( 'appended', $items );
});