Масонство не работает должным образом для "загрузить больше", используя Ajax - PullRequest
Новая
       33

Масонство не работает должным образом для "загрузить больше", используя Ajax

0 голосов
/ 05 января 2020

На моем сайте у меня есть список продуктов в кладке. Все отлично работает Но при попытке добавить бесконечный список с помощью Ajax мой макет кладки не работает должным образом. Ошибка выглядит примерно так, как показано ниже: enter image description here

Первые элементы загружаются правильно. Когда я добираюсь до конца страницы, новые элементы перекрывают старую, и кладочная система перестает работать, и все траншеи выглядят без кладки.

Мой код в шаблоне выглядит следующим образом ( другие файлы ): 

  <div class="row masonry infinite-container">
    {% for object in numbers %}
    <div class="masonry-item col-3 infinite-item">
      <!--Content-->
    </div>
    {% endfor %}
  </div>


  <!-- Load more -->
  {% if numbers.has_next %}
  <a href="?page={{ numbers.next_page_number }}" class="btn">Loading...</a>
  {% endif %}
  <!-- end pagination -->

  <!-- Infinite Scroll -->
  <script src="{% static 'assets/js/jquery-3.1.1.min.js' %}"></script>
  <script src="{% static 'assets/js/jquery.waypoints.min.js' %}"></script>
  <script src="{% static 'assets/js/infinite.min.js' %}"></script>
  <script>
  var infinite = new Waypoint.Infinite({
    element: $('.infinite-container')[0]
  });
  </script>

JS

var Masonry = (function() {

    // Variables

    var $masonryContainer = $(".masonry-container");


    // Methods

    function init($this) {
        var $el = $this.find('.masonry'),
            $filters = $this.find('.masonry-filter-menu'),
            $defaultFilter = $filters.find('.active'),
            defaultFilterValue = $defaultFilter.data('filter');

        var $masonry = $el.imagesLoaded(function() {

            // Set default filter if exists

            if (defaultFilterValue != undefined && defaultFilterValue != '') {

                if (defaultFilterValue != '*') {
                    defaultFilterValue = '.' + defaultFilterValue;
                }

                $defaultFilter.addClass('active');
            }


            // Plugin options
            var options = {
                itemSelector: '.masonry-item',
                filter: defaultFilterValue
            };

            // Init plugin
            $masonry.isotope(options);
        });


        // Sorting buttons (filters)

        $filters.on('click', 'a', function(e) {
            e.preventDefault();

            var $this = $(this),
                val = $(this).attr('data-filter');

            if (val == '*') {
                val = '';
            } else {
                val = '.' + val;
            }

            $masonry.isotope({
                filter: val
            }).on( 'arrangeComplete', function() {
                $filters.find('[data-filter]').removeClass('active');
                $this.addClass('active');
            } );
        });

    }


    // Events

    if ($masonryContainer.length) {
        $masonryContainer.each(function() {
            init($(this));
        })
    }

})();

Как я могу исправить эту ошибку? Я не знаю много о ajax, но похоже, что новый запрос загружается без учета моего масонского кода.

...