如何增加每幅图像上边距和边距

问题描述：

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

简单地说：您知道我在通过每张图片时如何增加边距？这将是最干净的方式吗？

这是我的代码：

function cascade() { 
 
\t $('.journal-single-img').each(function(){ 
 
\t \t var marginLeft = 50; 
 
     var marginTop = 100; 
 
\t $(this).css({ 
 
\t \t \t left:marginLeft, 
 
      top:marginTop  
 
\t \t \t \t }); 
 
      marginLeft= marginLeft + 50; 
 
      marginTop= marginTop + 50; 
 
\t }); 
 
    } 
 
\t 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>

答

你真的应该使用索引你的。每个函数中，代码看起来干净多了。此外，您如何编程该部分的方式只是重置marginLeft和marginTop。我重写，并增加了一个div容器，使代码的功能更流畅：

function cascade() { 
 
\t $('.journal-single-img').each(function(index){ 
 
\t \t var marginLeft = 50; 
 
    var marginTop = 100; 
 
\t $(this).css({ 
 
\t \t \t left:marginLeft*index, 
 
     top:marginTop*index  
 
    }); 
 
\t }); 
 
    } 
 
\t 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>

完美！非常感谢nfn尼尔 –

嘿，如果你可以标记为解决方案，它会帮助很多 – Neil

答

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

答

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

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

如何增加每幅图像上边距和边距

相关推荐