在动态添加的图像上实现 Jquery Isotope

Question

我正在尝试为 Drupal 编写一个模块，该模块具有使用同位素处理图像的功能。我想做的是从用户那里获取一个输入链接，然后将该图像加载到#content-images div中。我在这些图像上实施同位素插件时遇到了问题。

这是我的代码的 jsfiddle：http://jsfiddle.net/xu4k7/1/。 当我将上面的代码更改为以下代码时，图像不显示。

(function ($) {
$(document).ready(function () {
    $("#input-box-to-obtain-image-links").change(function() {
            var value = $(this).val();
            $('#content-images').append('<div class="image"><img class="isotope-images" src="'+value+'"></div>');
    });

     $('#content-images').isotope({
        itemSelector: '.image'
    });
});
})(jQuery);

我只想知道如何在这些图像上实现同位素，以便在我调整浏览器大小时，图像会自行对齐。 谢谢

Answer 1

您的同位素包装器的高度为 0 像素，这就是图像不可见的原因。也许同位素初始化太早了，所以它无法计算它的包装高度？见

Isotope jquery plugin doesn't show properly on chrome

或

Isotope intermittently returns 0px height on div

（第一个链接似乎确实是您的解决方案：将 isotope init 放入实际 DOM 更新后触发的回调中）