Question

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

我在wordpress中有一个自定义后期类型的存档页面，我在页面中每页显示10个帖子并运行 isotope js 进行div打包，我使用 next_posts_link（）生成一个包含id＆＃39;＃next_archive_page＆＃39;的链接。一切都很好，这一切都按预期工作。

现在我尝试添加将实现 infiniteScroll 功能的jQuery，但是我可以获取渲染这些新帖子的图像的唯一方法是删除img的bootstrap类 - 从它们流出（这只是宽度：100％;高度：自动;）......

<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>

我不想删除流动类，因为我需要它来处理我的响应式布局...

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

如何让infiniteScroll和isotope与bootstrap响应性相匹配？

Answer 1

您是否看过元素的样式？听起来他们添加了0宽度和/或0高度。

同位素+ infiniteScroll + Wordpress + Bootstrap

1 个答案: