Packery +无限滚动+ imagesLoaded =不工作

Question

我一直在尝试让Packery和infinitescroll jquery插件工作，然而由于某种原因，新的元素出现在彼此的顶部。

我被引导到图像加载的插件，但是由于某种原因，它似乎覆盖了一个又一个元素。我为jQuery 1.9 (https://github.com/lukeshumard/smartscroll/pull/2)的智能滚动插件应用了一个补丁，但是，我认为问题出在图片加载和打包上。

我的脚本如下所示：

    $(document).ready(function() {

        // declaring variables
        var $sidebar        = $("#sidebarHolder"),
            $sidebarwidth   = $sidebar.width(),
            $window         = $(window),
            $windowheight   = $window.height(),
            $offset         = $sidebar.offset(),
            $topPadding     = $("#sitewide").height(),
            $container      = $('#container.clearfix');

        // making sure the sidebar stays the right size when it's resized
        $(window).on("resize",function () {
            $("[role=sidebar]").width($sidebarwidth).show();
            $("#sidebarHolder,[role=sidebar]").height($windowheight + 20);
        }).resize();

        // scroll 'stick to the top' function
        $(window).on("scroll",function() {
            if ($window.scrollTop() > $offset.top) {
                $sidebar.addClass('sticky');
            }else{
                $sidebar.removeClass('sticky');
            }
        }).scroll();

        $container.packery({
            itemSelector:'article.item',
            columnWidth:"div.grid-sizer",
            rowHeight:"div.grid-sizer",
            gutter:"div.gutter-sizer",
            transitionDuration:'0.2s'
        });

        $container.infinitescroll({
            navSelector:'div.paginate',
            nextSelector:'div.paginate a.next',
            itemSelector:'article.item',
            loading:{
                finishedMsg:'No more pages to load.'
            }
        },
        function(newElements) {
            $(newElements).imagesLoaded(function(){
                $container.packery('appended', newElements);
            });
        });

    });

任何帮助都将不胜感激。

如果需要，我可以设置一个jsbin或codepen。

Answer 1

这似乎是Chrome Canary的一个问题，因为它可以在其他浏览器中工作……