javascript - 同位素附加似乎不起作用

Question

我有一个由 Isotope 提供支持的照片库。
在页面加载时以及每次用户滚动到页面底部时，都会从外部资源请求图像。新图像将附加到当前的同位素布局中。问题出在 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。在“附加”回调中添加 alert('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 被 isotope 用来过滤要布局的元素，$() 返回对象数组。结果没有要布局的元素。如果您有兴趣，您可以在调试中查看 _getAtoms 方法(同位素脚本)以了解发生了什么。