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

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.

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>