使用jQuery创建图像网格

Creating a grid of images with jQuery

本文关键字：网格 图像 创建 jQuery 使用      更新时间：2023-09-26

我对web编程和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;
    }
}

但是，这些图像在最终偏移位置被放置在彼此的顶部。有人知道为什么会这样吗?

哇哈哈!(邪恶的笑声)

这里有一个错误，一个常见的、隐蔽的错误，一个与图像、CSS或jQuery无关的错误。这是Javascript中的延迟绑定错误。

OP使用变量t和l来表示"顶部"answers"左侧"(顺便说一句，OP, top和left作为变量名有什么问题)，在循环中增加它们并在回调时调用它们。但是t和l是后期绑定。当onload函数被调用时，这些变量被设置为它们的最终值，而不是图像标签创建时的值。

因此，"图像在最终偏移位置被放置在彼此的顶部"。

试试这个:

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

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

请看下面的例子。如果您更改#container宽度的CSS，您将看到每行中的图像数量动态变化。我认为这是一个更清晰的方法。它去掉了所有的数学运算，让浏览器处理布局。

你的代码中有很多效率低下的地方。对于一个使用jQuery的人来说，当您可以执行$('<img />')时，不需要执行new Image()。而且，可能在某些时候，有人想要改变图像的数量，或者图像的高度，给自己一个选项。此外，您可以使用.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在那里意味着无论你把"容器"，你的绝对定位项目将正确显示。

不知道为什么它们不能正常折叠。我很确定有一些漂亮的css技巧可以用来在css文件中设置这些位置，但让我们使用您的示例。

可能是容器不够高，不能包含额外的行，因此只是把它放在最后?

对于您的示例，我会将数学内联，并且对于每行6张图像只需执行以下操作，而不是使用所有这些计数变量:

$(this).css( {
    "position": "absolute",
    "top": Math.floor(i / 6) * 50 + 'px',
    "left": (i % 6) * 50 + 'px'
});
这可能解决不了你的问题，但在我看来它更干净了。
相关文章：