如何增加每幅圖像上邊距和邊距

我在某些圖像之前有一些文字。我想要在可變數量的圖像上實現級聯效果，就像在這張照片裏一樣。我不知道最終會有多少圖像，所以現在我有三個。我也不知道確切的高度和寬度，但現在我已將它設置爲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>

來源

2017-05-08 Joao Alves Marrucho

你真的應該使用索引你的。每個函數中，代碼看起來乾淨多了。此外，您如何編程該部分的方式只是重置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>

來源

2017-05-08 15:01:32 Neil

完美！非常感謝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()

來源

2017-05-08 15:03:30 Wakeuphate

你可以循環之前定義的變量。

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

來源

2017-05-08 15:04:06

如何增加每幅圖像上邊距和邊距

回答

相關問題