我知道这个问题已经被问了很多次了,但由于我缺乏JavaScript知识,我仍然无法让我的主题(使用砌体+无限滚动)工作......对于使用无限滚动加载的帖子,"赞"按钮不可点击。我觉得20789608(2014 年 3 月 5 日更新的答案)非常接近我需要的,但仍然无法让我的工作(不知道如何正确合并/应用)。这是我的代码(仅相关部分)。
.JS
<script type="text/javascript">
jQuery(function($){
// with masonry & jQuery
// init masonry
var $grid = $('.grid').masonry({
// masonry options
itemSelector: '.grid-item',
columnWidth: 400,
gutter: 20,
fitWidth: true,
});
// get masonry instance
var msnry = $grid.data('masonry');
// layout masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
{block:IfInfiniteScroll}
// init infinite scroll
$grid.infiniteScroll({
// infinite scroll options
path: '.pagination_next',
append: '.for_infinite_scroll',
outlayer: msnry,
status: '.page-load-status',
});
{/block:IfInfiniteScroll}
});
</script>
.HTML
<div id="content" class="grid">
{block:Posts}
<article class="{PostType}{block:PermalinkPage} {block:Date}not-{/block:Date}page{/block:PermalinkPage} {TagsAsClasses} for_infinite_scroll">
{block:Text}
<div class="post grid-item">
{block:Title}
<h1><a href="{Permalink}">{Title}</a></h1>
{/block:Title}
<div>
{Body}
</div>
</div><!-- .post grid-item -->
{/block:Text}
如果您能帮助我解决这个问题,将不胜感激。提前感谢!
看起来我已经找到了解决方案。用以下内容替换 {block:IfInfiniteScroll} 和 {/block:IfInfiniteScroll} 之间的代码似乎有效。
{block:IfInfiniteScroll}
// init infinite scroll
$grid.infiniteScroll({
// infinite scroll options
path: '.pagination_next',
append: '.for_infinite_scroll',
outlayer: msnry,
status: '.page-load-status',
});
// making like buttons work using infinite scroll
$grid.on('append.infiniteScroll',function(e,r,p,items){
var $newElems = $(items);
var $newElemsIDs = $newElems.map(function(){
return this.id;
}).get();
Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
});
{/block:IfInfiniteScroll}