使用PHP for循环以Z字形顺序放置一系列图像

Question

I'm a beginner in PHP and I'm seeking your guidance to know the possibilities of placing a sequence of images in a zigzag order using PHP loop.

The number of images received may vary each time, so the img src code is placed in a foreach loop, I currently have them display one below the other but would like to know if there is an opportunity to place them in a zigzag manner as image attached

$j=0; 
 foreach ($data['employee'] as $teammember) {
echo $data['team']['members'][$j]['TeamRank'] . "." . $data['team']['members'][$j]['name'] ;
echo "<img src='http://yyyyyyy/employeeimage'" . $j . "'.png' />";
$j = $j + 1;
}

I'm seeking your advice in placing the name and image in zigzag form.

Answer 1

This is really just CSS. Put your loop or the data from the loop inside of an element that wraps it, and on that element, apply display: flex; flex-direction: column; align-items: flex-start, and use the :nth-child() selector to change every other flex child to align-self: flex-end;

In your loop, change this so that the text and image are wrapped in an element.

<div class="flex">
<?php
  $j=0; 
  foreach ($data['employee'] as $teammember) {
    echo '<div><p>' . $data['team']['members'][$j]['TeamRank'] . "." . $data['team']['members'][$j]['name'] . '</p>';
    echo "<img src='http://yyyyyyy/employeeimage'" . $j . "'.png' /></div>";
    $j = $j + 1;
  }
?>
</div>

And use this CSS.

.flex {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 50vw;
  margin: auto;
}

.flex > div:nth-child(odd) {
  align-self: flex-end;
}

<div class="flex">
  <!-- your php code would go here, and just output a list of images -->
  <div>
    <p>text</p>
    <img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">
  </div>      
  <div>
    <p>text</p>
    <img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">
  </div>
  <div>
    <p>text</p>
    <img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">
  </div>
  <div>
    <p>text</p>
    <img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">
  </div>
  <div>
    <p>text</p>
    <img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">
  </div>
  <div>
    <p>text</p>
    <img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">
  </div>
</div>

</div>