Question

我遵循了许多教程来使Masonry与Infinite Scroll一起工作，但是我不断遇到错误“ infiniteScroll不是函数”。

我最初一直在查看此文档... https://masonry.desandro.com/v2/docs/methods.html#appended 随着这个例子... https://masonry.desandro.com/v2/demos/infinite-scroll.html

以上两个链接均与旧版本有关，并指示我前往... https://masonry.desandro.com/ 似乎没有使用当前版本的任何石工/无限滚动实例。

我在Infinite Scroll网站上找到了一个砌体部分... https://infinite-scroll.com/#masonry-isotope-packery 这引出了以下示例... https://codepen.io/desandro/pen/eRRQVo

我一直在阅读这篇文章... https://github.com/desandro/masonry/issues/747 desandro于2015年8月28日发表评论... “几年前，我会推荐Infinite Scroll，但是它不再受支持了，所以要当心。” rugor于2015年9月5日发表评论... “或者，Infinite Ajax Scroll就像一种对待。” desandro于2017年9月12日发表评论... “ Infinite Scroll v3已发布，带有全新的重写，包括对Masonry的严格支持。请尝试升级到Infinite Scroll v3。” 我以为我可以继续使用最新版本的Masonry和Infinite Scroll来解决这个问题，还是应该沿着“ Infinite Ajax Scroll”路线走下去？

我也看过这个... https://potentpages.com/web-design/infinite-scroll/tutorials/masonry

HEAD CODE

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js"></script>
    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>

模板代码

<div class="grid">
    <div class="grid-sizer"></div>
    <div class="gutter-sizer"></div>
    <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $args = array( 'post_type' => 'post', 'posts_per_page' => 10, 'paged' => $paged );
    $wp_query = new WP_Query($args);
    while ( have_posts() ) : the_post(); ?>
        <div class="grid-item">
            <?php if ( has_post_thumbnail() ) : ?>
                <a class="featured" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                    <?php the_post_thumbnail(); ?>
                </a>
            <?php endif; ?>
            <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
            <?php the_excerpt(); ?>
        </div>
    <?php endwhile; ?>
</div> <!-- grid -->
<div class="page-load-status">
    <div class="loader-ellips infinite-scroll-request">
        <span class="loader-ellips__dot"></span>
        <span class="loader-ellips__dot"></span>
        <span class="loader-ellips__dot"></span>
        <span class="loader-ellips__dot"></span>
    </div>
    <p class="infinite-scroll-last">End of content</p>
    <p class="infinite-scroll-error">No more pages to load</p>
</div>
<div class="pagination">
    <?php next_posts_link( '&larr; Older posts', $wp_query ->max_num_pages); ?>
    <?php previous_posts_link( 'Newer posts &rarr;' ); ?>
</div> <!-- pagination -->

JS

jQuery(document).ready(function($) {

        "use strict";

        $(function() {

            //-------------------------------------//
            // init Masonry

            var $grid = $('.grid').masonry({
                itemSelector: 'none', // select none at first
                columnWidth: '.grid-sizer',
                gutter: '.gutter-sizer',
                percentPosition: true,
                stagger: 30,
                // nicer reveal transition
                visibleStyle: { transform: 'translateY(0)', opacity: 1 },
                hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
            });

            // get Masonry instance
            var msnry = $grid.data('masonry');

            // initial items reveal
            $grid.imagesLoaded( function() {
                $grid.removeClass('are-images-unloaded');
                $grid.masonry( 'option', { itemSelector: '.grid-item' });
                var $items = $grid.find('.grid-item');
                $grid.masonry( 'appended', $items );
            });

            //-------------------------------------//
            // init Infinte Scroll

            $grid.infiniteScroll({
                path: '.nextPosts',
                append: '.grid-item',
                outlayer: msnry,
                status: '.page-load-status',
            });

        });


    }); /* End Document Ready */

功能代码

/************* Add Pagination Class ********************/

add_filter('next_posts_link_attributes', 'next_posts_link_attributes');

function next_posts_link_attributes() {
    return 'class="nextPosts"';
}

出现以下错误... “ $ grid.infiniteScroll不是函数” 我在其他教程中也遇到相同的错误。

似乎我的问题更多与错误“ infiniteScroll不是函数”有关，而与我尝试并遵循的教程无关。对这个问题的其他人的回应是... “您应该确保初始化代码在$（function（）{}）内，因为在运行infinitescroll之前需要准备好DOM。” 要么 “确保已包含无限滚动包。” 我已经尝试/检查了这两个建议。

任何克服此错误的帮助将不胜感激！

如何传递错误“ infiniteScroll不是函数”？

0 个答案: