Javascript 使用jQuery创建图像网格

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

var t=0；
var l=0；
对于（i=0；i300）{
t=t+50；
l=0；
}
}

---

但是，这些图像会在最终偏移位置彼此重叠放置。有人知道为什么会发生这种情况吗？

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

可能是容器不够高，无法容纳额外的行，因此只能将其放在末尾

对于您的示例，我将数学放在内联位置，对于6个图像pr行，只需执行以下操作，而不是使用所有这些计数变量：

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

---

这可能解决不了你的问题，但在我看来更干净

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

---

有关示例，请参见。如果更改

#container

宽度的CSS，您将看到每行中的图像数量动态变化。我认为这是一个更干净的方法。它把所有的数学都计算出来，让浏览器来处理布局问题。

Mwahaha！[邪恶的笑声]

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

OP使用变量

t

和

l

来表示“top”和“left”（顺便提一下，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;
    }
}

var renderImage=函数（imgdesc，t，l）{
var img=新图像（）；
美元（img）
.attr（'src'，imgdesc['url']））
.attr（'id'，imgdesc['id']））
.load（函数（）{
$（'#container'）。追加（$（this））；
//您的其他自定义代码
$（this.css（{
“位置”：“绝对”，
“顶部”：t+‘px’，
“左”：l+“px”
});
});
};
var t=0；
var l=0；
对于（i=0；i300）{
t=t+50；
l=0；
}
}

您的代码中有很多小的低效之处。对于一个使用jQuery的用户，当您可以执行

$（“”）

时，无需执行

newimage（）

。另外，可能在某个时候，有人会想要改变图片的数量，或者图片的高度，给自己一个好的选择。另外，您可以使用

.attr（{…}）

一次设置多个标记属性，并且记住jQuery附带了非常好的

.each（）

方法来处理常规数组

因此，我的解决方案如下：

---

请注意，其中的

position:relative

意味着无论您将“容器”放在何处，您绝对定位的项目都将正确显示。

请注意

css（）

方法不需要将

'px'

添加到传递到带有数字的属性中的值中。像素是默认值。公平点。不过我并没有考虑它们，tbh，因为我的代码片段只是一个复制粘贴，替换了int计算。真是小气，我没有注意到晚装订的东西…谢谢你的提示。非常有帮助，太好了！请投票选出对您有帮助的答案，当您满意时，通过打勾选择“最佳答案”。正如Knuth所说，“我们应该忘记小效率，比如说97%的时间。”特别是

新图像（）

/

$（）

只是一个完全随机的偏好。当然<代码>var img=新图像（）$（img）vs

$（“”）

。称前者为低效率是否夸大了事实？大概但对我来说感觉很粗糙。我们正在创建一个不需要的变量，而我们可以使用对jQueryAPI的一次调用来完成这一切。我知道我更喜欢哪一种，但我要承认Perl的座右铭TMTOWTDI。现在这更有意义了。看起来我被困在了一个最大的javascript大瀑布里。非常感谢，Malvolio。@Alvin——我写Javascript已经15年了，现在大约每月写一次。当然，我可能只是愚蠢而已。

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

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