同位素 + 无限滚动 + Wordpress + Bootstrap答案

【问题标题】：Isotope + infiniteScroll + Wordpress + Bootstrap同位素 + 无限滚动 + Wordpress + Bootstrap
【发布时间】：2018-05-05 05:52:03
【问题描述】：

我正在尝试一个相对简单的事情..

我在 wordpress 中有一个自定义帖子类型的存档页面，我在分页中每页显示十个帖子并运行 isotope js 进行 div 打包，我使用 next_posts_link() 生成 ID 为“#next_archive_page”的链接。一切都很好，这一切都按预期工作。

现在我正在尝试添加将实现 infiniteScroll 功能的 jQuery，但我可以让这些新帖子的图像呈现的唯一方法是删除 img-fluid 的引导类来自他们（这只是 width: 100%; height: auto; ）...

<div class="row grid">
    <?php if( $query->have_posts() ) : while( $query->have_posts() ) : $query->the_post() ?>
    <div class="grid-sizer col-4">
        <img class="img-fluid" src="...">
    </div>
    <?php endwhile; endif; wp_reset_query() ?>
</div>

<script>
    window.onload = function() {

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

        $grid.infiniteScroll({
            hideNav: '.pagination',
            path : '.pagination #next_archive_page',
            scrollThresold: 200
        });

        $grid.on( 'load.infiniteScroll', function( event, response, path ) {
            var $items = $( response ).find('.grid-item');
            // It's the height: auto style that stops images displaying
            $items.find('img').removeClass('img-fluid');
            $items.imagesLoaded( function() {
                $grid.append( $items );
                $grid.isotope( 'insert', $items );
            });
        });
    }
</script>

我不想删除 ing-fluid 类，因为我的响应式布局需要它...

因此，这样做的结果是它将下一个自定义帖子类型存档页面中的 .grid-item 元素附加到正确的位置，但它们都是重叠的并且大小错误。

我怎样才能让infiniteScroll 和isotope 在引导响应方面发挥出色？

【问题讨论】：

标签： jquery wordpress bootstrap-4 infinite-scroll jquery-isotope

【解决方案1】：

你看过元素的样式吗？听起来它们添加了 0 宽度和/或 0 高度。

【讨论】：

好吧，实际上，我只是刺激了一会儿，然后意识到图像上有一个引导类“img-fluid”导致了这个问题。如果我把它关掉，那么下一页图像会渲染......但是我该如何解决呢？因为我的布局需要这个类。
您可以否决导致元素 css 类中问题的引导样式规则。您只需要确保它比引导 css 规则更具体。作为最后的手段，您可以在类中的 css 属性上使用 !import，这将导致它们具有最高优先级，但在大多数情况下不鼓励使用，因为它不能再被否决。如果在追加元素时已经添加了类，则可以遍历元素并删除 javascript 中的引导类。
是的，所以我需要 css 原样......但我尝试调用 $items.find('img').removeClass('img-fluid'); i> 在 load.infiniteScroll 回调函数中有效，但是，我需要在同位素显示元素之前将该类放回原处，因为我目前得到的是附加的重叠图像。有什么想法吗？
我会尝试在 'img-fluid' 中找到正确对齐它们的 css 属性并将其添加到您自己的 css 中。您还可以尝试保留引导程序类，看看是否可以更改自己的 css 以解决显示问题。我将从显示、宽度和高度属性开始。