Question

围绕Wordpress中的Masonry和无限滚动的组合，我遇到了很多问题，即on this page。

我认为让Masonry使用无限滚动需要在无限滚动jQuery代码中进行回调 - 这似乎已经很成熟。但是，在非常特殊的情况下，我似乎只能在我的Wordpress网站上进行无限滚动工作，鉴于这些情况，我不确定如何整合Masonry。

此代码借鉴了Masonry.js网站的无限滚动演示，现在位于页脚：

<script>
  $(function(){

    var $container = $('.et_pb_blog_grid_wrapper');

    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '.post',
        columnWidth: 100
      });
    });

    $container.infinitescroll({
      navSelector  : '#nextposts',    // selector for the paged navigation 
      nextSelector : '#nextposts a',  // selector for the NEXT link (to page 2)
      itemSelector : '.post',     // selector for all items you'll retrieve
      loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://dearjackalope.com/juliaproblems/wp-content/themes/juliamariani/images/ajax-loader.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 ); 
        });
      }
    );

  });
</script>

问题是，即使它在静态HTML中工作，在这个页面上它没有任何效果，我不明白为什么！这是什么工作：

<script>
    var infinite_scroll = {
        loading: {
            img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif",
            msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
            finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
        },
        "nextSelector":"#nextposts a",
        "navSelector":"#nextposts",
        "itemSelector":".post",
        "contentSelector":".et_pb_blog_grid_wrapper"
    };
    jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
    </script>

但我不确定如何将Masonry回调添加到此 - 在回调中声明变量的方式看起来与此截然不同（我知道美元符号在jQuery中定义并且它出现在回调中但是不是在原始代码中 - 我不确定这是否重要？），我不确定它需要去的功能究竟在哪里。我试过了：

<script>
var infinite_scroll = {
        loading: {
            img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif",
            msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
            finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
        },
        "nextSelector":"#nextposts a",
        "navSelector":"#nextposts",
        "itemSelector":"article.post",
        "contentSelector":".et_pb_blog_grid_wrapper"
        },
        // hide new items while they are loading
        var $newElems = jQuery(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 );
        });
    };
    jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
</script>

然后，声明一个新功能：

<script>
    var infinite_scroll = {
        loading: {
            img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif",
            msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
            finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
        },
        "nextSelector":"#nextposts a",
        "navSelector":"#nextposts",
        "itemSelector":"article.post",
        "contentSelector":".et_pb_blog_grid_wrapper"        
    });
    };
    jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
    function newElements()  // hide new items while they are loading
        var $newElems = jQuery(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 );
    </script>

这些都不起作用，所以我不确定我应该在哪里进行回调，或者是否有关于原始代码的内容意味着回调将无效。我花了大约八个小时阅读Javascript教程和文档，我不知道下一步该尝试什么。 :(

有一个现在不支持但仍然看似广泛使用的插件名为Infinite-Scroll，其中包含一个“砌体模式”的复选框，但是当我尝试安装它时，我什么都没有 - 它似乎没有加载任何代码进入页面，所以这似乎不是一个选项。值得注意的是，我发现Jetpack无限滚动功能甚至在完全设置主题之后也没有任何代码加载到页面中，因此我似乎仅限于非插件代码。

我的主题是否存在根本错误导致所有这些问题？我的Javascript充其量只是初学者，我真的很想知道从哪里开始 - 任何帮助都会非常感激。

Answer 1

好的，所以看起来整个问题源于Wordpress并不理解$作为jQuery变量的事实，因为它的默认排队版jQuery在无冲突模式下运行。

更换所有＆＃39; $＆＃39;与jQuery＆＃39;签约解决了这个问题，或者你可以把它包装在一个函数中并将它映射到$这就是我所做的 - http://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

我不确定我是如何错过这一点的，但是如果其他人在使用Wordpress进行无限滚动工作时遇到困难，那么在经过数小时的迷惑之后，它就像是为什么它不能正常工作！

Answer 2

如果这有助于其他人，我试图将该函数添加到infinite_scroll js变量中而陷入困境。像这样添加它工作正常：

var infinite_scroll = {
    loading: {
        img: "<?php echo get_template_directory_uri(); ?>/library/images/ajax-loader.gif",
        msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
        finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
    },
    "nextSelector":".pagination .next",
    "navSelector":".pagination",
    "itemSelector":".infinite-scroll-post",
    "contentSelector":"#infinite-scrollable",
    "debug":true
}
jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll,function(arrayOfNewElems){
    picturefill({ reevaluate: true });
} );

jQuery无限滚动中的砌体回调不能在Wordpress中工作 - 也不是无限滚动插件

2 个答案: