Comment augmenter la marge en haut et à gauche de chaque image?

J'ai du texte devant certaines images. Je veux obtenir un effet en cascade sur un nombre variable d'images comme dans cette image ci-dessous. Je ne sais pas combien d'images il y aura à la fin alors pour l'instant j'en ai trois. Je ne connais pas non plus la hauteur et la largeur exactes mais pour l'instant je l'ai fixé à 300 x 500px; J'essaie d'utiliser jquery pour styliser les images mais jusqu'ici je ne peux appliquer que les mêmes marges à toutes les images. Je crois que ce dont j'ai besoin est une boucle qui parcourt chaque image, puis ajoute 50px aux variables de marge, puis passe à l'image suivante en utilisant la nouvelle variable de marge, puis ajoute 50px aux variables de marge et ainsi de suite ... Pour le dire simplement: Savez-vous comment je peux augmenter les marges que je traverse chaque image? Quelle serait la façon la plus propre de le faire?Comment augmenter la marge en haut et à gauche de chaque image?

Ceci est mon code:

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>

Source

2017-05-08 Joao Alves Marrucho

Vous devriez vraiment utiliser l'index à l'intérieur de votre fonction .each, le code semble beaucoup plus propre. De plus, la manière dont vous avez programmé cette portion a juste continué à réinitialiser marginLeft et marginTop. Je réécrite et ajouté un conteneur div pour rendre la fonction de code lisse:

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>

Source

2017-05-08 15:01:32 Neil

parfait! merci beaucoup nfn neil –

hey si vous pouviez marquer comme solution, cela aiderait beaucoup – Neil

Vous réinitialisant actuellement votre marginLeft et marginTop chaque fois que vous passez par votre chaque boucle, si vous déplacez les les variables hors dans la fonction d'origine, vous ne serez pas remis à zéro et au lieu itérer sur eux qui permettra à votre effet de cascade:

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

Source

2017-05-08 15:03:30 Wakeuphate

vous pouvez définir des variables avant la boucle.

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

Source

2017-05-08 15:04:06

Comment augmenter la marge en haut et à gauche de chaque image?

Répondre

Questions connexes