如何增加每张图像的顶部和左侧边距答案

【问题标题】：How do I increase the margin top and left on each image如何增加每张图像的顶部和左侧边距
【发布时间】：2017-10-06 15:31:51
【问题描述】：

我在一些图片之前有一些文字。我想在可变数量的图像上实现级联效果，就像下面这张图片一样。我不知道最终会有多少图像，所以现在我有三个。我也不知道确切的高度和宽度，但现在我已将其设置为 300 x 500px；我正在尝试使用 jquery 来设置图像的样式，但到目前为止我只能对所有图像应用相同的边距。我相信我需要的是一个循环，而不是遍历每个图像，然后将 50px 添加到边距变量，然后使用新的边距变量传递到下一个图像，然后再添加 50px 到边距变量等等......

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

这是我的代码：

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

 img.journal-single-img {
 position: relative;
  width: 300px;
  height: 450px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
  <p>Aenean vel aliquet orci, et dapibus purus. Etiam fringilla neque vitae est condimentum, porta elementum nulla tincidunt. Morbi posuere odio lectus. 
  </p>
  <p>
    <a href="http://jadepalacecollective.com/wp-content/uploads/2017/02/tumblr_oesiqbS7jo1sbdxw4o1_1280_red.jpg">
      <img class="journal-single-img" src="http://jadepalacecollective.com/wp-content/uploads/2017/02/tumblr_oesiqbS7jo1sbdxw4o1_1280_red.jpg" alt="" width="300" height="500" >
    </a>
  </p>
  <p>
    <a href="http://jadepalacecollective.com/wp-content/uploads/2017/02/Christies1_red.jpg"> 
      <img class="journal-single-img" src="http://jadepalacecollective.com/wp-content/uploads/2017/02/Christies1_red.jpg" alt="" width="300" height="500">
    </a>
  </p>
  <p>
    <a href="http://jadepalacecollective.com/wp-content/uploads/2017/02/tumblr_oja76fgsbR1qdsqp6o1_500_red.jpg">
      <img src="http://jadepalacecollective.com/wp-content/uploads/2017/02/tumblr_oja76fgsbR1qdsqp6o1_500_red.jpg" alt="" width="300" height="500" class="journal-single-img">
    </a>
  </p>
</body>

【问题讨论】：

标签： javascript jquery css each

【解决方案1】：

你真的应该在你的 .each 函数中使用 index ，代码看起来更干净。此外，您对该部分的编程方式只是不断重置 marginLeft 和 marginTop。我重写了，添加了一个容器div，让代码功能更流畅：

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

.container {
  position:relative;
}

img.journal-single-img {
 position: absolute;
  width: 300px;
  height: 450px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
  <p>Aenean vel aliquet orci, et dapibus purus. Etiam fringilla neque vitae est condimentum, porta elementum nulla tincidunt. Morbi posuere odio lectus. 
  </p>
  <div class="container">
  <p>
    <a href="http://jadepalacecollective.com/wp-content/uploads/2017/02/tumblr_oesiqbS7jo1sbdxw4o1_1280_red.jpg">
      <img class="journal-single-img" src="http://jadepalacecollective.com/wp-content/uploads/2017/02/tumblr_oesiqbS7jo1sbdxw4o1_1280_red.jpg" alt="" width="300" height="500" >
    </a>
  </p>
  <p>
    <a href="http://jadepalacecollective.com/wp-content/uploads/2017/02/Christies1_red.jpg"> 
      <img class="journal-single-img" src="http://jadepalacecollective.com/wp-content/uploads/2017/02/Christies1_red.jpg" alt="" width="300" height="500">
    </a>
  </p>
  <p>
    <a href="http://jadepalacecollective.com/wp-content/uploads/2017/02/tumblr_oja76fgsbR1qdsqp6o1_500_red.jpg">
      <img src="http://jadepalacecollective.com/wp-content/uploads/2017/02/tumblr_oja76fgsbR1qdsqp6o1_500_red.jpg" alt="" width="300" height="500" class="journal-single-img">
    </a>
  </p>
  </div>
</body>

【讨论】：

【解决方案2】：

您当前正在重置您的 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()

【讨论】：

【解决方案3】：

你可以在循环之前定义变量。

    function cascade() {

        var marginLeft = 50;
        var marginTop = 50;


        $('.journal-single-img').each(function(){

            $(this).css({
                left:marginLeft,
                top:marginTop
            });

            marginLeft = marginLeft + 50;
            marginTop = marginTop + 50;
        });
    }

    cascade();

【讨论】：