1

我正在使用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 以砌体格式重新排列我的帖子？

谢谢。

4

1 回答 1

0

我遇到了同样的问题，并按照此处的说明在服务器端（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 的附加功能。上面的脚本基本上等同于 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 );
});
于 2016-05-21T18:18:46.330 回答