图像库一列中的多个对象

Question

您好我有一个带有“for”属性的问题。我想在那里制作一个图库，我检查一个文件夹中的所有图像并显示它。但是我想这样做，也许3张照片进入一个coloumn然后为其他照片制作更多coloumns。

<div class="row">
 <div class="column">

        <?php
        $files = glob("images/*.*");
        for ($i=0; $i<count($files); $i++)
         {
           $image = $files[$i];
           $supported_file = array(
                   'gif',
                   'jpg',
                   'jpeg',
                   'png'
            );

            $ext = strtolower(pathinfo($image, PATHINFO_EXTENSION));
            if (in_array($ext, $supported_file)) {

                    echo "<img src=".$image." style=width:100% />";
               }
             }

           ?>
  </div>

Answer 1

您不应该在同一列中放置多个项目，而是将每个项目放在一列中并使用行。

试试这个：

<?php 
$files = glob("images/*.{gif,jpg,jpeg,png}", GLOB_BRACE);

foreach ($files as $key => $file) {
    if ($key % 3 == 0) { // change 3 to how many items between rows
        if ($key != 0) { echo '</div>'.PHP_EOL; }
        echo '<div class="row">'.PHP_EOL;
    }
    echo '<div class="column"><img src="'.$file.'" style=width:100% /></div>'.PHP_EOL;
}
?>
</div>

https://3v4l.org/Y3bXo

结果：

<div class="row">
  <div class="column"><img src="foo.jpg" style=width:100% /></div>
  <div class="column"><img src="foo1.png" style=width:100% /></div>
  <div class="column"><img src="foo2.png" style=width:100% /></div>
</div>
<div class="row">
  <div class="column"><img src="foo3.png" style=width:100% /></div>
  <div class="column"><img src="foo4.png" style=width:100% /></div>
  <div class="column"><img src="foo5.png" style=width:100% /></div>
</div>
<div class="row">
  <div class="column"><img src="foo6.png" style=width:100% /></div>
  <div class="column"><img src="foo7.png" style=width:100% /></div>
  <div class="column"><img src="foo8.png" style=width:100% /></div>
</div>
<div class="row">
  <div class="column"><img src="foo9.png" style=width:100% /></div>
  <div class="column"><img src="foo10.png" style=width:100% /></div>
</div>