Bootstrap 4 + Изотоп + Загрузить больше: Высота вопроса? - PullRequest
Новая
       17

Bootstrap 4 + Изотоп + Загрузить больше: Высота вопроса?

0 голосов
/ 07 ноября 2018

Я использую Bootstrap 4 с Isotope для страницы списка новостей. Я также использую скрипт Load More, чтобы показать дополнительные записи. По какой-то причине - записи, в которые были внесены изменения, не отображают полную высоту (хотя это гибкие блоки). Вот тестовая страница:

https://heliosenergy.wpengine.com/industry-news/

Для справки вот скрипт jQuery: 

jQuery(document).ready(function() {

    jQuery('.grid').imagesLoaded(function() {

        var $grid = jQuery('.grid').isotope({
            itemSelector: '.grid-item',
            layoutMode: 'fitRows',
            percentPosition: true,
            masonry: {
                columnWidth: '.grid-sizer'
            }
        });

        // bind filter button click
        jQuery('.newsFilters').on('click', 'button', function() {
            var filterValue = jQuery(this).attr('data-filter');
            $grid.isotope({
                filter: filterValue
            });
        });

        // change is-checked class on buttons
        jQuery('.newsFilters').each(function(i, buttonGroup) {
            var $buttonGroup = jQuery(buttonGroup);
            $buttonGroup.on('click', 'button', function() {
                $buttonGroup.find('.is-checked').removeClass('is-checked');
                jQuery(this).addClass('is-checked');
            });
        });

        //****************************
        // Isotope Load more button
        //****************************
        var initShow = 9; // number of items loaded on init & onclick load more button
        var counter = initShow; // counter for load more button
        var iso = $grid.data('isotope'); // get Isotope instance

        loadMore(initShow); // execute function onload

        function loadMore(toShow) {
            $grid.find(".d-none").removeClass("d-none");
            var hiddenElems = iso.filteredItems.slice(toShow, iso.filteredItems.length).map(function(item) {
                return item.element;
            });
            jQuery(hiddenElems).addClass('d-none');
            $grid.isotope('layout');
            // when no more to load, hide show more button
            if (hiddenElems.length == 0) {
                jQuery("#load-more").hide();
            } else {
                jQuery("#load-more").show();
            };
        }

        // append load more button
        $grid.after('<div class="col-md-12 text-center"><a class="btn" id="load-more" href="#" title="View More">View More</a></div>');

        // when load more button clicked
        jQuery("#load-more").click(function(e) {
            if (jQuery('.newsFilters').data('clicked')) {
                // when filter button clicked, set initial value for counter
                counter = initShow;
                jQuery('.newsFilters').data('clicked', false);
            } else {
                counter = counter;
            };
            counter = counter + initShow;
            loadMore(counter);
            e.preventDefault();
        });

        // when filter button clicked
        jQuery(".newsFilters").click(function() {
            jQuery(this).data('clicked', true);
            loadMore(initShow);
        });
    });
});

Есть идеи, кто виноват здесь? Я пытаюсь избежать назначения минимальной высоты с помощью CSS, если это возможно. Спасибо за вашу помощь.

...