Bootstrap 4 +同位素+加载更多:高度问题?

时间:2018-11-07 08:10:35

标签: twitter-bootstrap bootstrap-4 jquery-isotope

我正在将Bootstrap 4与同位素一起用于新闻列表页面。我还使用“加载更多”脚本来显示其他条目。由于某些原因-修改后的条目不会显示完整高度(尽管它们是弹性框)。这是测试页:

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分配最小高度。谢谢您的帮助。

0 个答案:

没有答案