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

同位素包装的高度为0px，这就是图像不可见的原因。也许同位素初始化过早，所以无法计算其包装高度？参见

Isotope jquery plugin doesn't show properly on chrome

或

Isotope intermittently returns 0px height on div

（第一个链接似乎是你的解决方案：在实际DOM更新后的一个回调中放置isotope init）

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

1 个答案: