Javascript 如何增加每个图像的顶部和左侧边距

我在一些图像之前有一些文本。我想在不同数量的图像上实现级联效果，就像下面的图片一样。 我不知道最后会有多少张照片，所以现在我有三张。我也不知道确切的高度和宽度，但现在我已经设置为300 x 500像素；我试图使用jquery来设置图像的样式，但到目前为止，我只能对所有图像应用相同的边距。我相信我需要的是一个循环，然后在每个图像中运行，然后将50px添加到边距变量，然后使用新的边距变量传递到下一个图像，然后将另一个50px添加到边距变量，依此类推

简单地说：你知道当我通过每一张图片时，如何增加边距吗？ 最干净的方法是什么

这是我的代码：

函数级联（）{
$（'.journal single img'）。每个（函数（）{
var marginLeft=50；
var marginTop=100；
$（this.css）({
左：marginLeft，
上图：玛金托普
});
marginLeft=marginLeft+50；
marginTop=marginTop+50；
});
}
级联（）

img.journal-single-img{
位置：相对位置；
宽度：300px；
高度：450px；
}

埃尼安·阿利奎特·奥奇和达皮布斯·普鲁斯。它是一种调味品，是一种不含酒精的调味品。莫比·波苏尔·奥迪奥·莱克托斯。

你真的应该在你的函数中使用索引。每个函数的代码看起来都更干净。此外，您编程该部分的方式只是不断重置marginLeft和marginTop。我重写了它并添加了一个container div，以使代码函数更平滑：

函数级联（）{
$（'.journal single img'）。每个（函数（索引）{
var marginLeft=50；
var marginTop=100；
$（this.css）({
左：marginLeft*索引，
顶部：marginTop*索引
});
});
}
级联（）

.container{
位置：相对位置；
}
img.journal-single-img{
位置：绝对位置；
宽度：300px；
高度：450px；
}

埃尼安·阿利奎特·奥奇和达皮布斯·普鲁斯。它是一种调味品，是一种不含酒精的调味品。莫比·波苏尔·奥迪奥·莱克托斯。

你真的应该在你的函数中使用索引。每个函数的代码看起来都更干净。此外，您编程该部分的方式只是不断重置marginLeft和marginTop。我重写了它并添加了一个container div，以使代码函数更平滑：

函数级联（）{
$（'.journal single img'）。每个（函数（索引）{
var marginLeft=50；
var marginTop=100；
$（this.css）({
左：marginLeft*索引，
顶部：marginTop*索引
});
});
}
级联（）

.container{
位置：相对位置；
}
img.journal-single-img{
位置：绝对位置；
宽度：300px；
高度：450px；
}

埃尼安·阿利奎特·奥奇和达皮布斯·普鲁斯。它是一种调味品，是一种不含酒精的调味品。莫比·波苏尔·奥迪奥·莱克托斯。

您当前正在重置

marginLeft

和

marginTop

每次执行每个循环时，如果您将这些变量移出原始函数，您将不会重置它们，而是对它们进行迭代，这将允许级联效应：

function cascade() {
    var marginLeft = 50;
    var marginTop = 100;
    $('.journal-single-img').each(function(){
      $(this).css({
        left: marginLeft,
        top: marginTop
      });
      marginLeft = marginLeft + 50;
      marginTop = marginTop + 50;
    });
}

cascade()

---

您当前正在重置

marginLeft

和

marginTop

每次执行每个循环时，如果您将这些变量移出原始函数，您将不会重置它们，而是对它们进行迭代，这将允许级联效应：

function cascade() {
    var marginLeft = 50;
    var marginTop = 100;
    $('.journal-single-img').each(function(){
      $(this).css({
        left: marginLeft,
        top: marginTop
      });
      marginLeft = marginLeft + 50;
      marginTop = marginTop + 50;
    });
}

cascade()

---

您可以在循环之前定义变量

函数级联（）{
var marginLeft=50；
var marginTop=50；
$（'.journal single img'）。每个（函数（）{
$（this.css）({
左：marginLeft，
上图：玛金托普
});
marginLeft=marginLeft+50；
marginTop=marginTop+50；
});
}
级联（）；

您可以在循环之前定义变量

函数级联（）{
var marginLeft=50；
var marginTop=50；
$（'.journal single img'）。每个（函数（）{
$（this.css）({
左：marginLeft，
上图：玛金托普
});
marginLeft=marginLeft+50；
marginTop=marginTop+50；
});
}
级联（）；