將Django無盡的分頁與砌體結合使用

Question

我正在嘗試使用Django Endless Pagination以及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>