django+bootstrap
Имеется страничка с бесконечной прокруткой, но сейчас она работает некорректно.
Дано:
Есть queryset с новостями. Новость делится на типы: большая и маленькая. Если новость большая, то она идет в большой div(col-lg-8), если новость маленькая, то в маленький div(col-lg-4).

Проблема:
Из-за того, что pagination всегда статичное значение, а кол-во маленьких и больших новостей разное - появляются row, которые заполнены на 1/3 или 2/3. См. скрин.
Надо предоставить решение для корректного отображения - например с динамической пагинацией или div с новой страницы вставали в один row с div предыдущей страницы.



Код:

<div class="container">
<div class="article-feed">
<div class="row iscroll">
{% for art in all %}
{% if art.banner_page %}
<div class="col-lg-8 mb-2 mt-2">
<img class="card-img-top" src="{{art.banner.url}}" >
</div>
{% else %}
div class="col-lg-4 mb-2 mt-2 ">
<img class="card-img-top" src="{{art.banner.url}}" >
</div>

{% endif %}{% endfor %}
<p class="pagination">
<a class="pagination__next" href="?page={{ page_obj.next_page_number }}">
</a></p>
<script src="{% static "js/infinite-scroll.pkgd.min.js" %}"></script>
<script>
$('.article-feed').infiniteScroll({
path: '.pagination__next',
append: '.iscroll',
});
</script>