Question

所以我似乎出于某种原因得到了这个错误： [InfiniteScroll] images外接层选项所需的图片

即使我已声明imagesLoaded ......这是我的代码：

import 'ImagesLoaded';
import Isotope from 'Isotope';
import InfiniteScroll from 'infinite-scroll';

我在网页顶部加载了带webpack和es6的插件：

with 
x as
    (select 'hist' type, To_Date('JAN-2017','MON-YYYY') ym , 10 value from dual union all
    select 'future' type, To_Date('JAN-2017','MON-YYYY'), 15 value from dual union all
    select 'future' type, To_Date('FEB-2017','MON-YYYY'), 1 value from dual),
y as
    (select * from x Pivot(Sum(Value) For Type in ('hist' as h,'future' as f))),
    /* Pivot for easy lag,lead query instead of working with rows..*/
z as
    (
        select ym,sum(h) H,sum(f) F from (
            Select y.ym,y.H,y.F from y
            union all
            select add_months(to_Date('01-JAN-2017','DD-MON-YYYY'),rownum-1) ym, 0 H, 0 F 
            from dual connect by rownum <=3 /* depends on how many months you are querying... 
            so this dual adds the corresponding missing 0 records...*/
        ) group by ym
    )
select 
ym,
Case
    When MOD(Extract(Month from YM),3) = 1
    Then F + Lead(F,1) Over(Order by ym) + Lead(F,2) Over(Order by ym)
    When MOD(Extract(Month from YM),3) = 2
    Then Lag(H,1) Over(Order by ym) + F + Lead(F,1) Over(Order by ym)
    When MOD(Extract(Month from YM),3) = 3
    Then Lag(H,2) Over(Order by ym) + Lag(H,1) Over(Order by ym) + F
End Required_Value
from z

不知道发生了什么，希望有人可以提供帮助！

Answer 1

好的，好像我没有阅读Webpack安装的所有文档......我必须为imagesloaded分配无限滚动。

InfiniteScroll.imagesLoaded = imagesLoaded;

所以我的完整代码是：

        InfiniteScroll.imagesLoaded = imagesLoaded;

        $('.item-list').imagesLoaded( function () {  

            var $grid = $('.item-list');

            $grid.isotope({
                itemSelector: '.item-list__card',
                layoutMode: 'masonry',
                masonry: {
                    columnWidth: '.grid-sizer',
                    horizontalOrder: true,
                    gutter: '.gutter-sizer',
                },
                percentPosition: true,
            });

            var iso = $grid.data('isotope');

            $grid.infiniteScroll({
                    path: '.navigation a',
                    append: '.item-list__card',
                    debug: true,
                    status: '.infinite-scroll-request',
                    outlayer: iso,
                    //safari work around
                    onInit: function () {
                        this.on('load', function () {
                            $grid.isotope('layout');
                        })
                    }
                }
            );

            // filter items on button click
            $('.filter').on('click', 'button', function () {
                var filterValue = $(this).attr('data-filter');
                $grid.isotope({filter: filterValue});
            });
        });

Answer 2

Infinite Scroll在here中提供了很棒的教程，希望对您有所帮助！

外层选项需要ImagesLoaded

2 个答案: