Javascript 整合Tumblr“；例如；带有无限Ajax滚动条的按钮（与Paul Irish的无限滚动条相比）
问题：Javascript 整合Tumblr“；例如；带有无限Ajax滚动条的按钮（与Paul Irish的无限滚动条相比）,javascript,jquery,tumblr,infinite-scroll,jquery-masonry,Javascript,Jquery,Tumblr,Infinite Scroll,Jquery Masonry,问题： Tumblr博客上使用砌体和无限Ajax滚动的非功能“Like”按钮。 我的研究： 我已经看到了几个如何将Tumblr的类按钮与Paul Irish的无限卷轴集成的示例，但是我发现关于如何使用IAS进行集成的信息不太明确，不幸的是，我的JavaScript知识不足以将其组合起来。以下是我参考过的文章： -tumblr.com/docs/en/custom#themes#like_和_reblog_按钮 -stackoverflow.com/questions/16390193/使用带
Tumblr博客上使用砌体和无限Ajax滚动的非功能“Like”按钮。
我的研究：
我已经看到了几个如何将Tumblr的类按钮与Paul Irish的无限卷轴集成的示例，但是我发现关于如何使用IAS进行集成的信息不太明确，不幸的是，我的JavaScript知识不足以将其组合起来。以下是我参考过的文章：
-tumblr.com/docs/en/custom#themes#like_和_reblog_按钮
-stackoverflow.com/questions/16390193/使用带有无限滚动的tumblr类按钮
-stackoverflow.com/questions/18245238/tumblr-like按钮在无限滚动ajax调用后不工作
-stackoverflow.com/questions/20789608/how-to-request-tumblr-like-button-status-after-a-new-page-is-loaded-with-infinity
-magnusthemes.tumblr.com/post/132530444620/like按钮，带有无限滚动教程
我所尝试的：
-在帖子中添加id=“{PostID}”，然后
-尝试将以下内容插入my JS的几个不同位置（在其自身的函数中，在附加砖石柱的函数中，等等）： …这些尝试要么破坏了砖石布局，而没有固定类似的按钮，要么根本没有效果。
代码测试仪：
我在Tumblr上创建了一个测试博客（），用户名为stackoverflow-test@mailinator.com和密码堆栈溢出测试。登录后，转到编辑和预览代码。
完整代码：
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://neuraldamage.com/css/reset.css">
<style type="text/css">
.j-msn { padding-bottom: 6em; } /* masonry container */
.j-itm { position: relative; float: left; } /* masonry item */
.j-itm, .j-szr--itm { width: 25%; } /* item sizer */
.j-szr--gtr { width: 0; } /* gutter sizer */
.j-itm img { position: relative; float: left; width: 100.1%; } /* prevent pixel gaps */
#j-pag { display: none; } /* pagination */
.j-nxt {} /* next page */
.j-spn { position: absolute; bottom: 2em; width: 100%; text-align: center; } /* spinner */
.j-spn__img { display: inline-block; width: 40px; height: 40px; background-size: 100%;
background-image: url('https://neuraldamage.com/img/icon/loader-01-black.gif'); } /* spinner image */
.j-fin { position: absolute; bottom: 1em; z-index: 20; padding: 0 0.5em; } /* finished */
.j-fin__txt { font-style: italic; } /* finished text */
</style>
</head>
<body>
<div class="[ j-msn ]">
<div class="[ j-szr--itm ]"></div><div class="[ j-szr--gtr ]"></div>
{block:Posts}
{block:Text}
<div class="[ j-itm ]" id="{PostID}">
{block:Title}{Title}{/block:Title}
{Body}
{LikeButton color="black" size="24"}
</div>
{/block:Text}
{block:Photo}
<div class="[ j-itm ]" id="{PostID}">
{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">{LinkCloseTag}
{LikeButton color="black" size="24"}
</div>
{/block:Photo}
{/block:Posts}
<ul id="j-pag">
{block:PreviousPage}<li><a href="{PreviousPage}">« Previous</a></li>{/block:PreviousPage}
{block:NextPage}<li class="[ j-nxt ]"><a href="{NextPage}">Next »</a></li>{/block:NextPage}
</ul>
</div>
<script type="text/javascript" src="https://neuraldamage.com/js/jquery.min.js"></script>
<script type="text/javascript" src="https://neuraldamage.com/js/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="https://neuraldamage.com/js/jquery-ias.min.js"></script>
<script type="text/javascript">
// masonry
var container = document.querySelector('.j-msn');
var msnry = new Masonry( container, {
itemSelector : '.j-itm',
columnWidth : '.j-szr--itm',
gutter : '.j-szr--gtr',
percentPosition : true
});
// infinite ajax scroll
var ias = $.ias({
container : ".j-msn",
item : ".j-itm",
pagination : "#j-pag",
next : ".j-nxt a",
negativeMargin : 200,
delay : 2400
});
ias.on('render', function(items) {
$(items).css({ opacity: 0 });
});
ias.on('rendered', function(items) {
msnry.appended(items);
});
ias.extension(new IASSpinnerExtension({
src: '<div class="[ j-spn ]"><div class="[ j-spn__img ]"></div></div>',
}));
ias.extension(new IASNoneLeftExtension({html: '<div class="[ j-fin ]"><h2 class="[ j-fin__txt ]">End.</h2></div>'}));
// TEST - like buttons
// function(){
// var $newPosts = $(data).find('.j-itm');
// var $newPostIDs = $newPosts.map(function () {
// return $(this).attr('id');
// }).get();
// Tumblr.LikeButton.get_status_by_post_ids($newPostIDs);
// });
</script>
</body>
</html>
.j-msn{填充底部：6em；}/*砌体容器*/
.j-itm{位置：相对；浮动：左侧；}/*砌体项目*/
.j-itm、.j-szr--itm{宽度：25%；}/*项目大小*/
.j-szr--gtr{宽度：0；}/*排水沟尺寸*/
.j-itm img{位置：相对；浮动：左侧；宽度：100.1%；}/*防止像素间隙*/
#j-pag{display:none；}/*分页*/
.j-nxt{}/*下一页*/
.j-spn{位置：绝对；底部：2米；宽度：100%；文本对齐：中心；}/*微调器*/
.j-spn_u_img{显示：内联块；宽度：40px；高度：40px；背景大小：100%；
背景图像：url（'https://neuraldamage.com/img/icon/loader-01-black.gif'）；}/*微调器图像*/
.j-fin{位置：绝对；底部：1em；z索引：20；填充：0.5em；}/*完成*/
.j-fin__txt{font-style:italic；}/*完成的文本*/
{block:Posts}
{block:Text}
{block:Title}{Title}{/block:Title}
{Body}
{LikeButton color=“black”size=“24”}
{/block:Text}
{块：照片}
{LinkOpenTag}{LinkCloseTag}
{LikeButton color=“black”size=“24”}
{/block:Photo}
{/block:Posts}
{block:PreviousPage}{/block:PreviousPage}
{block:NextPage}{/block:NextPage}
//砌石
var container=document.querySelector（'.j-msn'）；
var msnry=新砌体（容器、{
项目选择器：'.j-itm'，
列宽：'.j-szr--itm'，
排水沟：'.j-szr——全球技术法规'，
位置：正确
});
//无限阿贾克斯卷轴
var ias=$.ias({
容器：“.j-msn”，
项目：“.j-itm”，
分页：“j-pag”，
下一步：“.j-nxt a”，
负缺：200，
延误：2400
});
ias.on（'呈现'）功能（项目）{
$（items.css（{opacity:0}）；
});
ias.on（'呈现'）功能（项目）{
附加msnry（项目）；
});
国际会计准则扩展（新国际会计准则扩展）({
src:“”，
}));
extension（新的IASNoneLeftExtension（{html:'End.'}））；
//类测试按钮
//函数（）{
//var$newPosts=$（数据）.find（'.j-itm'）；
//var$newPostIDs=$newPosts.map（函数（）{
//返回$（this.attr（'id'）；
//}）get（）；
//Tumblr.LikeButton.get_status_by_post_id（$newPostIDs）；
// });
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://neuraldamage.com/css/reset.css">
<style type="text/css">
.j-msn { padding-bottom: 6em; } /* masonry container */
.j-itm { position: relative; float: left; } /* masonry item */
.j-itm, .j-szr--itm { width: 25%; } /* item sizer */
.j-szr--gtr { width: 0; } /* gutter sizer */
.j-itm img { position: relative; float: left; width: 100.1%; } /* prevent pixel gaps */
#j-pag { display: none; } /* pagination */
.j-nxt {} /* next page */
.j-spn { position: absolute; bottom: 2em; width: 100%; text-align: center; } /* spinner */
.j-spn__img { display: inline-block; width: 40px; height: 40px; background-size: 100%;
background-image: url('https://neuraldamage.com/img/icon/loader-01-black.gif'); } /* spinner image */
.j-fin { position: absolute; bottom: 1em; z-index: 20; padding: 0 0.5em; } /* finished */
.j-fin__txt { font-style: italic; } /* finished text */
</style>
</head>
<body>
<div class="[ j-msn ]">
<div class="[ j-szr--itm ]"></div><div class="[ j-szr--gtr ]"></div>
{block:Posts}
{block:Text}
<div class="[ j-itm ]" id="{PostID}">
{block:Title}{Title}{/block:Title}
{Body}
{LikeButton color="black" size="24"}
</div>
{/block:Text}
{block:Photo}
<div class="[ j-itm ]" id="{PostID}">
{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">{LinkCloseTag}
{LikeButton color="black" size="24"}
</div>
{/block:Photo}
{/block:Posts}
<ul id="j-pag">
{block:PreviousPage}<li><a href="{PreviousPage}">« Previous</a></li>{/block:PreviousPage}
{block:NextPage}<li class="[ j-nxt ]"><a href="{NextPage}">Next »</a></li>{/block:NextPage}
</ul>
</div>
<script type="text/javascript" src="https://neuraldamage.com/js/jquery.min.js"></script>
<script type="text/javascript" src="https://neuraldamage.com/js/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="https://neuraldamage.com/js/jquery-ias.min.js"></script>
<script type="text/javascript">
// masonry
var container = document.querySelector('.j-msn');
var msnry = new Masonry( container, {
itemSelector : '.j-itm',
columnWidth : '.j-szr--itm',
gutter : '.j-szr--gtr',
percentPosition : true
});
// infinite ajax scroll
var ias = $.ias({
container : ".j-msn",
item : ".j-itm",
pagination : "#j-pag",
next : ".j-nxt a",
negativeMargin : 200,
delay : 2400
});
ias.on('render', function(items) {
$(items).css({ opacity: 0 });
});
ias.on('rendered', function(items) {
msnry.appended(items);
});
ias.extension(new IASSpinnerExtension({
src: '<div class="[ j-spn ]"><div class="[ j-spn__img ]"></div></div>',
}));
ias.extension(new IASNoneLeftExtension({html: '<div class="[ j-fin ]"><h2 class="[ j-fin__txt ]">End.</h2></div>'}));
// TEST - like buttons
// function(){
// var $newPosts = $(data).find('.j-itm');
// var $newPostIDs = $newPosts.map(function () {
// return $(this).attr('id');
// }).get();
// Tumblr.LikeButton.get_status_by_post_ids($newPostIDs);
// });
</script>
</body>
</html>