Question

我有一个由Isotope提供支持的照片库。
每次用户滚动到页面底部时，都会在页面加载时从外部资源请求图像。新图像将附加到当前同位素布局。问题出在同位素 - 它似乎没有执行'附加'方法。

在StackExchange和Google上搜索解决方案显示我不是唯一遇到此问题的人。在过去的几天里，我一直在修补这个问题并尝试了几乎所有我能找到的解决方案，但到目前为止我还没有找到任何可以解决我问题的方法。

CodePen ：我在这里创建了一个CodePen - http://codepen.io/Writech/pen/pBoEt
WebPage ：由于自定义事件'resizestop'在codepen中不起作用，因此在此处找到相同的代码作为网页 - http://writech.net.ee/sandbox/

要查看问题，请打开上面提供的CodePen或WebPage，然后滚动到页面底部，开始加载其他图像。然后你会看到新图像只是通过jQuery附加到容器中。但它们并没有附加到同位素布局实例中。

有问题的部分位于名为isotopeAppend（）的自定义函数中。在页面加载时调用此函数，然后执行“if-else”语句的第二部分。初始化完成后，第一个图像被添加到容器中，然后下次调用isotopeAppend（）（当用户到达页面底部时），执行'if-else'语句的第一部分，这就是有问题的同位素'附加'方法被调用。

以下有问题的javascript代码的代码片段。对外部资源的ajax请求的结果将应用于变量 newElems 。在'追加'回调中添加警报（'something'）或console.log时 - 没有任何反应。

问题出在Isotope本身还是与我的编码错误有关？我真的想找到一个解决方案！

var elements = $(newElems).css({ opacity: 1, 'width' : columnWidthVar + 'px' });
$('#photos_section_container').append( elements );

$('#photos_section_container').imagesLoaded(function(){

    $('#photos_section_container').isotope( 'appended', elements, function(){
        hideLoader(function(){
            elements.animate({ opacity: 1 }); 
        });
    }); 

});

Answer 1

在初始化更改中

itemSelector : $('.photos_section_wrap'),

到

itemSelector : '.photos_section_wrap',

我forked你的笔。

同位素使用

itemSelector来过滤元素到布局，$（）返回对象数组。结果没有要布局的元素。如果您有兴趣，可以查看调试中的_getAtoms方法（同位素脚本），了解其中的内容。

同位素附加似乎不起作用

1 个答案: