LittleSnake42
1/24/2018 - 2:02 PM

SMAC alterner : classe 1 classe2 - classe2 classe1 - classe1 classe2

ligne1 : div1.classe1, div2 .classe2 -> images grosses ligne2 : div1.classe2, div2 .classe1 -> images petites ligne3 : div1.classe1, div2 .classe2 -> images grosses ligne4 : div1.classe2, div2 .classe1 -> images petites

css only version
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
<style> 
p {
	display: inline-block;
}

div:nth-child(odd) p:nth-child(odd){
	width: 35%;
    background-color : blue;
}

div:nth-child(odd) p:nth-child(even){
	width: 60%;
    background-color : red;

}
div:nth-child(even) p:nth-child(odd){
	width: 60%;
    background-color : red;

}
div:nth-child(even) p:nth-child(even){
	width: 35%;
    background-color : blue;
}

div:nth-child(odd) {
	height : 50px;
    border: 1px solid lime;
}

div:nth-child(even) {
	height : 100px;
    border: 2px solid black;

}

</style>
</head>
<body>

<div>
	<p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
</div>
<div>
	<p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
</div>
<div>
	<p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
</div>
<div>
	<p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
</div>
<div>
	<p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
</div>
<div>
	<p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
</div>

</body>
</html>
smac
content_copyfile_download
# valeurs par defaut
$class = "";
$class_img = "";
$row = 0; // $row = 1;
$i = 0;

while($condition) {
  
  if ($row%2 === 0) { // ligne paire (1-3-5 si par defaut $row == 0, 2-4-6 sinon)
    $class_img = "lg";
    if ($i%2 == 0) { //item pair sur ligne paire
      $class = "8";
    } else {
      $class = "4";
    }
  } else {
    $class_img = "sm";
    if ($i%2 === 0) { //item pair sur ligne impaire
      $class = "4";
    } else {
      $class = "8";
    }
  }
  # mise à jour numero de ligne tous les 2 -> i est impaire
  if ($i%2 == 1) {
    $row++;
  }
  # mise à jour de i
  $i++;

  # affichage
  
  echo '<div class="'.$class.'">';
  echo '  <img src="" class="'.$class_img.'">';
  echo '</div>';


} # fin while