各画像の上余白と左余白を増やすにはどうすればいいですか

一部の画像の前にテキストがあります。この写真のように、可変数の画像にカスケード効果を加えたいと思っています。最終的にどれくらいのイメージがあるか分かりませんので、今は3つあります。私はまた正確な高さと幅を知らないが、今は300 x 500pxに設定している。私はjqueryを使用してイメージのスタイルを設定しようとしていますが、これまではすべてのイメージに同じマージンを適用できます。私が必要とするのは、各イメージを通過するループよりも、マージン変数に50pxを追加し、新しいマージン変数を使用して次のイメージに渡し、マージン変数に50pxを追加するなどです。各画像の上余白と左余白を増やすにはどうすればいいですか

単純に言えば、各画像を通過するときに余白をどのように増やすことができるか知っていますか？これを行う最もクリーンな方法は何でしょうか？

これは私のコードです：あなたは本当にあなたの.each関数の内部でインデックスを使用する必要があります

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

各画像の上余白と左余白を増やすにはどうすればいいですか

答えて

関連する問題