0

这个让我把头发扯掉了。

我已经搜索过了；尝试了我能找到的一切。

在functions.php中：

function masonry_scripts() {
    wp_enqueue_script('jquery');
    if(is_home()){
        wp_enqueue_script('masonry', get_template_directory_uri() . '/js/masonry.pkgd.min.js');
        wp_enqueue_script('infinite scroll', get_template_directory_uri() . '/js/infinite-scroll.js');
        wp_enqueue_script('inf-mas-load', get_template_directory_uri() . '/js/masonry-reloader.js', array('jquery', 'masonry', 'infinite scroll'));
    };
};
add_action( 'wp_enqueue_scripts', 'masonry_scripts' );

masonry~.js 和infinite-scroll.js 是它们各自站点上可用脚本的本地副本。

在 masonry-reloader.js 中：

jQuery(function($){
    var $container = $('#items');

    $container.imagesLoaded(function(){
        $container.masonry({
            itemSelector: '.item-wrap',
            columnWidth: 472,
            gutter: 12
        });
    });

    $container.infinitescroll({
        navSelector  : '#pag.item-wrap',    // selector for the paged navigation 
        nextSelector : '#pag.item-wrap .pagination ul.paglinks li#older',  // selector for the NEXT link (to page 2)
        itemSelector : '.item-wrap',     // selector for all items you'll retrieve
        loading: {
            finishedMsg: 'No more pages to load.',
            img: 'http://i.imgur.com/6RMhx.gif'
        }
        },
        // trigger Masonry as a callback
        function( newElements ) {
            // hide new items while they are loading
            var $newElems = $( newElements ).css({ opacity: 0 });
            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function(){
                // show elems now they're ready
                $newElems.animate({ opacity: 1 });
                $container.masonry( 'appended', $newElems, true ); 
            });
        }
        );
});

它只是没有任何影响 - 就像脚本没有运行一样。

检查元素显示所有脚本加载。masonry~.js 很好，因为如果我用 HTML 或 no-jQuery-js 初始化，就很好。

不过，我需要使用 jQuery，以便可以从无限滚动中追加新项目。

这并不是因为无限滚动不好 - 如果我减少我的 jQuery 来初始化 Masonry（就像在 HTML 中正常工作一样），它不会初始化。就好像它根本不存在一样。

我已经做了一个多星期了，我真的希望有人能发现我的（可能）愚蠢的错误——我觉得我已经尝试了这一切。

4

2 回答 2

0

您需要先注册您的脚本，然后将其加入队列：

function masonry_scripts() {
    wp_enqueue_script('jquery');
    if(is_home()){
        // Register Scripts
        wp_register_script('masonry', get_template_directory_uri() . '/js/masonry.pkgd.min.js');
        wp_register_script('infinite_scroll', get_template_directory_uri() . '/js/infinite-scroll.js');
        wp_register_script('inf_mas_load', get_template_directory_uri() . '/js/masonry-reloader.js');

        // Enqueue Scripts
        wp_enqueue_script('masonry');
        wp_enqueue_script('infinite_scroll');
        wp_enqueue_script('inf_mas_load');
    };
};
add_action( 'wp_enqueue_scripts', 'masonry_scripts' );
于 2013-09-13T00:08:38.100 回答
0

2个谦虚的建议：

1) 为砌体和无限滚动提供一个依赖数组，以确保它们在 jQuery 之后加载。您入队的顺序不一定是服务器发送这些文件的顺序。

2）这可能看起来很琐碎，但无限滚动手柄中的空间"infinite scroll"让我感到紧张。WP 文档似乎并没有禁止使用空格，但我见过的每个文档都使用破折号或下划线来分隔。尝试将其更改为"infinite-scroll".

于 2013-09-13T02:09:47.970 回答