在 Masonry 中使用 Django Endless Pagination答案

【问题标题】：Using Django Endless Pagination with Masonry在 Masonry 中使用 Django Endless Pagination
【发布时间】：2013-01-18 04:09:18
【问题描述】：

我正在尝试将Django Endless Pagination 与Masonry 一起使用。

我一直遇到的问题是，砌体在第一页上工作得很好，但是当页面中填充新数据时，砌体不适用于新加载的元素。我查看了adding items，但我认为在这种情况下这对我没有帮助。

那么它们是一种在加载新元素后重新初始化砌体的方法吗？

我只是想知道是否有其他人有类似的问题，是否有人有解决方案？

【问题讨论】：

标签： javascript jquery django jquery-masonry django-endless-pagination

【解决方案1】：

如果有人有类似的问题，我终于找到了解决方案。我最终使用了.masonry('reload')。在 never_on_scroll 之后，再次调用 reload 函数会更容易。它可以解决问题！

【讨论】：

您添加的方式和位置。您能否添加一个sn-p代码。我被同样的事情困住了。

【解决方案2】：

Django-Endless-Pagination 在其设置中有一个onCompleted 回调。在那里，执行以下操作：

var masonry = $(myMasonryObject).data('masonry');
if (masonry !== undefined) {
    masonry.reloadItems();
    masonry.layout();
}

【讨论】：

【解决方案3】：

在上面的决定中，我发现了一些问题。当我滚动到页面末尾时，我看到了一些工件（项目相互叠加或在页脚上）。

我认为，这是因为我们在加载图像或其他东西之前调用了 masonry.reloadItems () 并且项目还没有它的实际大小。

这个解决方案可以解决这个问题：

 <script type="application/javascript">
    $.endlessPaginate({
      paginateOnScroll: true,
      paginateOnScrollMargin: 3840,
      onCompleted: function(context, fragment) {
        $(document).ready(function () {
            var gallery = $('.gallery');
            gallery.imagesLoaded(function () {
                var masonry = gallery.data('masonry');
                if (masonry !== undefined) {
                    masonry.reloadItems();
                    masonry.layout();
                }
            });
        });
      }
    });
  </script>

【讨论】：