Question

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

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

一旦加载新元素，他们是否可以重新初始化砌体？

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

Answer 1

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

Answer 2

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

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

Answer 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>

使用Django无尽的分页与砌体

3 个答案: