如何在一行中显示每个3项并继续循环结束？

Question

I have a list item Album contains 30 albums.

I tried to display all them in the browser with 1 rows contain 3 items.

With code like:

<div class="container">
    <div class="row">
        foreach($listAlbum as $item) {
            <div class="col-md-4">$item['imgUrl']</div>
        }
    </div>
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
    </div>
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
    </div>
</div>

Note: I want for each continues to loop all .col-md-4.

If I again using foreach(listAlbum) through each .row. It will duplicate, I don't want this.

Have any idea to resolve my problem?

Edit: Full structure in .col-md-4:

<div class="news-post standard-post">
  <div class="post-gallery">
    <a href="Album_Detail.html"><img src="upload/news-posts/st1.jpg" alt=""> </a>
  </div>
  <div class="post-content">
    <h2><a href="Album_Detail.html">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></h2>
    <ul class="post-tags">
      <li><i class="fa fa-clock-o"></i>27-Nov-2016</li>
      <li><a href="#"><i class="fa fa-comments-o"></i><span>23</span></a></li>
    </ul>
  </div>
</div>

Answer 1

You need a counter for the $listAlbum items. Increment the counter for each item and check if it is divisible by 3. If it is divisible by 3, re-open the row tag:

<?php
$listAlbum = [
  ['imgUrl' => 'url1'],
  ['imgUrl' => 'url2'],
  ['imgUrl' => 'url3'],
  ['imgUrl' => 'url4'],
  ['imgUrl' => 'url5'],
];

echo "<div class='container'>
\t<div class='row'>
";

$i = -1;
foreach ($listAlbum as $item) {
  if (++$i && $i % 3 == 0)
    echo "\t</div>
\t<div class='row'>
";
  echo "\t\t<div class='col-md-4'>", $item['imgUrl'], "</div>
";
}

if (++$i % 3)
  echo str_repeat("\t\t<div class='col-md-4'></div>
", 3 - $i % 3);

echo "\t</div>
</div>";

Sample Output

<div class='container'>
    <div class='row'>
        <div class='col-md-4'>url1</div>
        <div class='col-md-4'>url2</div>
        <div class='col-md-4'>url3</div>
    </div>
    <div class='row'>
        <div class='col-md-4'>url4</div>
        <div class='col-md-4'>url5</div>
        <div class='col-md-4'></div>
    </div>
</div>