我在某些图像之前有一些文字。我想要在可变数量的图像上实现级联效果,就像在这张照片里一样。 我不知道最终会有多少图像,所以现在我有三个。我也不知道确切的高度和宽度,但现在我已将它设置为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>
完美!非常感谢nfn尼尔 –
嘿,如果你可以标记为解决方案,它会帮助很多 – Neil