javascript - 触发 fluffy.js

Question

我正在尝试使用 fluffy 插件 ( https://github.com/mzdr/fluffy.js ) 制作一个简单的 tumblr 主题，但遇到了问题。该插件仅在页面加载时执行一次。我正在尝试让它与无限滚动插件( http://www.infinite-scroll.com/ )一起使用，并且我需要蓬松的插件在新内容加载时触发。

我对 JS 还很陌生，所以我很感谢我能得到的任何帮助。谢谢。

编辑添加的代码:

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
<script src="http://static.tumblr.com/hpghjri/co2nfnr1j/infinitescroll.min.js"></script>
<script src="http://static.tumblr.com/nxwjyyg/XWUob8gtq/fluffy.min.js"></script>

<script>

$(function(){
    app.initInfinite();
    app.onImagesLoad();       
}); //end document ready

var app = {
    'initInfinite' : function() {
        var $container = $('.page-index .posts');
        $container.infinitescroll({
            navSelector:".pagination",
            nextSelector:".pagination-next",
            itemSelector:".posts__container",
            appendCallback:true,
            loading:{
                finishedMsg:" ",
                img:"data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw==",
                msg:null,
                msgText:" ",
                selector:null,
                finished:function() {

                }
            }
        },

        function(newElements) {
            var $newElems = $(newElements).css({opacity:0});

            var $newElemsIDs = $newElems.map(function() {
                return this.id;
                Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
            }).get();

            $newElems.imagesLoaded(function() {
                $newElems.animate({opacity: 1});

               //what to do when new elems appended
               // I need to trigger fluffy here
            });

            var $newElemsIDs = $newElems.map(function() {
                return this.id;
            }).get();

            Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);

        });             
    },
    'onImagesLoad' : function() {
        $('.content .posts').imagesLoaded()
            .always( function( instance ) {
                console.log('all images loaded');
                $('.overlay').addClass('hide');
                $('.overlay__preloader').attr('class', '');
            })
            .done( function( instance ) {
                console.log('all images successfully loaded');
            });            
    }
}        

</script>

Answer 1

这是你的幸运日!我刚刚发布了v2.1.0这解决了你的问题。现在您可以像这样动态创建 Fluffy 对象:

// Start automatic detection
Fluffy.detect();

// Or provide a DOM node for single creation
var myElement = document.querySelector('#what-ever-you-like');

Fluffy.create(myElement);

// Or use a selector to create one
Fluffy.create('[data-fluffy-container]');

别忘了查看更新后的 docs .