同位素附加似乎不起作用答案

【问题标题】：Isotope appending doesn't seem to work同位素附加似乎不起作用
【发布时间】：2014-04-15 19:22:59
【问题描述】：

我有一个由 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”语句的第一部分被执行，这就是调用有问题的同位素“附加”方法。

下面的代码 sn-p 来自有问题的 javascript 代码。对外部资源的 ajax 请求的结果应用到变量 newElems。在 'appended' 回调中添加 alert('something') 或 console.log - 没有任何反应。

问题出在同位素本身还是与我的编码错误有关？我真的很想为此找到解决方案！

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 }); 
        });
    }); 

});

【问题讨论】：

标签： javascript jquery methods

【解决方案1】：

在初始化变化中

itemSelector : $('.photos_section_wrap'),

到

itemSelector : '.photos_section_wrap',

我forked你的笔。

itemSelector 被同位素用于过滤元素以进行布局，并且 $() 返回对象数组。结果没有要布局的元素。如果您有兴趣，您可以查看调试中的_getAtoms 方法（同位素脚本），看看发生了什么。

【讨论】：