【发布时间】：2014-08-23 02:22:22
【问题描述】：
我有很多关于在 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>
这些都不起作用，所以我不确定我应该将回调放在哪里，或者原始代码是否有某些东西意味着回调不起作用。我花了大约 8 个小时阅读 Javascript 教程和文档，但我不确定接下来要尝试什么。 :(
有一个现在不受支持但似乎仍在广泛使用的插件，名为 Infinite-Scroll，其中包含一个用于“砌体模式”的复选框，但是当我尝试安装它时，我什么也没得到 - 它似乎没有加载任何代码到页面中，所以这里似乎不是一个选项。可能值得注意的是，我还发现 Jetpack 无限滚动功能即使在为其完全设置主题后也没有将任何代码加载到页面中，因此我似乎仅限于此处的非插件代码。
我的主题是否存在根本性的问题导致所有这些问题？我的 Javascript 充其量只是初学者级别，我真的很想知道从哪里开始 - 任何帮助将不胜感激。
【问题讨论】：
标签： javascript wordpress callback jquery-masonry infinite-scroll