使用带有Masonry的Django无尽分页

Using Django Endless Pagination with Masonry

本文关键字：Django 无尽 分页 Masonry      更新时间：2023-09-26

我正在尝试使用带有Masonry的Django无尽分页。

我一直面临的问题是，Masonry在第一个页面上运行良好，但当页面中填充新数据时，Masony不适用于新加载的元素。我考虑过添加项目，但我认为在这种情况下这对我没有帮助。

那么，一旦加载了新元素，他们是否可以重新初始化砖石结构？

我只是想知道是否还有其他人也有类似的问题，是否有人能解决这个问题？

如果有人遇到类似的问题，我最终找到了解决方案。我最终使用了.masonry('reload')。在endless_on_roll之后，只需再次调用重载函数就更容易了。它解决了问题！

Django Endless Paging的设置中有一个onCompleted回调。在那里，执行以下操作： 
var masonry = $(myMasonryObject).data('masonry');
if (masonry !== undefined) {
    masonry.reloadItems();
    masonry.layout();
}

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

我想，这是因为我们在加载图像之前调用了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>
相关文章：