图像库 一列中的多个对象

Question

您好，我有一个关于“for”属性的问题。我想在那里创建一个图像库，我检查一个文件夹中的所有图像并显示它。但我想制作，所以也许 3 张图片进入一个列，然后为其他图片制作更多列。

<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>