Question

我是网络编程和jQuery的新手。我想加载图像并将它们排列在网格中。但是，要加载的图像数量不固定。我有一个数组img_arr，其中包含url和每个图像的id。

加载和定位图像的代码如下：

var t = 0;
var l = 0;
for (i = 0; i < img_arr.length; i++) {
    var img = new Image();
    $(img)
        .attr('src', img_arr[i]['url'])
        .attr('id',  img_arr[i]['id'])
        .load(function(){
            $('#container').append( $(this) );
            // Your other custom code
            $(this).css( {
                "position": "absolute",
                     "top": t + 'px',
                    "left": l + 'px'
            });
        });
    l = l + 50;
    if (l > 300) {
        t = t + 50;
        l = 0;
    }
}

但是，图像在最终偏移位置处彼此叠加。有人知道为什么会这样吗？

Answer 1

Mwahaha！ [邪恶的笑声]

这里有一个错误，一个常见的，阴险的错误，一个与图像，CSS或jQuery无关的错误。这是Javascript中的后期绑定错误。

OP使用变量t和l表示“顶部”和“左侧”（顺便提一下，OP，top和left的错误是变量名称），在循环中递增它们并在回调时调用它们。但t和l 后期绑定。调用onload函数时，这些变量将设置为 final 值，而不是创建图像标记时的值。

因此，“图像在最终偏移位置处彼此叠加”。

试试这个：

var renderImage = function(imgdesc, t, l) {
   var img = new Image();
    $(img)
        .attr('src', imgdesc['url'])
        .attr('id',  imgdesc['id'])
        .load(function(){
            $('#container').append( $(this) );
            // Your other custom code
            $(this).css( {
                "position": "absolute",
                     "top": t + 'px',
                    "left": l + 'px'
            });
        });
};

var t = 0;
var l = 0;
for (i = 0; i < img_arr.length; i++) {
    renderImage(img_arr[i], t, l)
    l = l + 50;
    if (l > 300) {
        t = t + 50;
        l = 0;
    }
}

Answer 2

如果您没有需要绝对定位它们，您可以使用流程布局来更轻松地完成此操作。

有关示例，请参阅this fiddle。如果您更改宽度为#container的CSS，您会看到每行中的图像数量会动态变化。我认为这是一种更清洁的方法。它需要所有数学，让浏览器处理问题。

Answer 3

不确定为什么他们实际上不会正确折叠。我很确定你可以用一些漂亮的css技巧在css文件中设置这些位置，但让我们使用你的样本。

可能是容器不够高，无法容纳额外的行，因此只是将它放在最后？

至于你的样本，我将数学内联，对于6个图像pr行，只需执行以下操作而不是使用所有这些计数变量：

$(this).css( {
    "position": "absolute",
    "top": Math.floor(i / 6) * 50 + 'px',
    "left": (i % 6) * 50 + 'px'
});

它可能无法解决您的问题，但它看起来更干净。

Answer 4

代码中的效率很低。一个人使用你的jQuery，当你可以new Image()时，不需要$('<img />')。此外，可能在某些时候，有人想要改变图像的数量，或图像的高度，给自己一个。此外，您可以使用.attr({ ... })一次设置多个标记属性，并记住jQuery带有非常好的.each()方法来处理常规数组。

所以这是我的解决方案：

var numberAcross = 6,
    widthOfImages = heightOfImages = 50;

$.each(img_arr, function(idx, value){
    $('<img />').attr({
        'src': value.url,
        'id': value.id,
        'width': widthOfImages,
        'height': heightOfImages
    }).css({
        'position': 'absolute',
        'top':  Math.floor(idx  / numberAcross) * heightOfImages,
        'left': (idx * widthOfImages) % (numberAcross * widthOfImages)
    }).appendTo('#container');
});

此外，您可能希望将css添加到#container元素中，以便在开发时看到更好一点：

<style>
#container {
    width: 100%;
    height: 600px;
    background-color: #ccc;
    position: relative;
}
</style>

请注意，position: relative表示无论您将“容器”放在哪里，您的绝对定位项都会正确显示。

使用jQuery创建图像网格

4 个答案: