Question

问题：
不起作用＆＃34;喜欢＆＃34;使用Masonry和Infinite Ajax Scroll的Tumblr博客上的按钮
我的研究：
我已经看过几个如何将Tumblr的Like按钮与Paul Irish的Infinite Scroll集成的例子，但我在IAS中如何做到这一点的信息不太明确，不幸的是，我的JavaScript知识不足以将它拼凑在一起。这些是我咨询过的文章：

- tumblr.com/docs/en/custom_themes#like_and_reblog_buttons
- stackoverflow.com/questions/16390193/using-tumblr-like-button-with-infinite-scroll
- stackoverflow.com/questions/18245238/tumblr-like-button-not-working-after-infinite-scroll-ajax-recall
- stackoverflow.com/questions/20789608/how-to-request-tumblr-like-button-status-after-a-new-page-is-loaded-with-infinit
- magnusthemes.tumblr.com/post/132530444620/like-button-with-infinite-scroll-tutorial

我尝试过的事情：
- 添加了id =＆＃34; {PostID}＆＃34;发帖，然后
- 尝试将以下内容插入到我的JS中的几个不同的地方（在它自己的函数中，在附加砌体帖子的函数中等）：

var $newPosts = $(data).find('.j-itm');
var $newPostIDs = $newPosts.map(function () {
    return $(this).attr('id');
}).get();
Tumblr.LikeButton.get_status_by_post_ids($newPostIDs);

......这些尝试要么在没有固定Like按钮的情况下打破了砌体布局，要么根本没有效果
代码测试员：
我在Tumblr上创建了一个测试博客（stackoverflow-test），用户名为stackoverflow-test@mailinator.com，密码为stackoverflowtest。登录后，转到https://www.tumblr.com/customize/stackoverflow-test以编辑和预览代码
完整代码：

<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}">&#171; Previous</a></li>{/block:PreviousPage}
                {block:NextPage}<li class="[ j-nxt ]"><a href="{NextPage}">Next &#187;</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>

非常感谢任何指导。我确信这相对简单，我为我极端的JavaScript无知而道歉！

整合Tumblr＆＃34;喜欢＆＃34;无限Ajax滚动的按钮（与Paul Irish的无限卷轴相比）

0 个答案: