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

Question

我在一些图片之前有一些文字。我想在可变数量的图像上实现级联效果，就像下面这张图片一样。我不知道最后会有多少张图片，所以现在我有三张。我也不知道确切的高度和宽度，但现在我已将其设置为 300 x 500 像素；我正在尝试使用 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>

Answer 1

你真的应该在你的 .each 函数中使用索引，代码看起来更清晰。此外，您对该部分进行编程的方式一直在重置 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>

Answer 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()

Answer 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();

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

How do I increase the margin top and left on each image

javascript

css

each

jquery