PHP foreach 循环在 flexbox 中创建四列答案

【问题标题】：PHP foreach loop that creates four colums on flexboxPHP foreach 循环在 flexbox 中创建四列
【发布时间】：2022-08-16 05:08:39
【问题描述】：

我正在尝试使用 CSS 和 PHP 制作类似 flexbox 的东西。这个想法是将.jpg图像上传到一个文件夹，然后将它们平均分为四列。我目前的方法是计算文件夹中的文件总数，除以四，然后为 foreach 循环创建索引以迭代并将图像放入列中。我需要它到look like this。

稍后我将不得不在这些图像中的每一个上制作一个弹出窗口，这应该会带来一些基本的 HTML/CSS 内容。不确定对于这种特殊情况是否需要考虑。

这是我的（不完整/不工作）代码：

<?php
$fi = new FilesystemIterator(\"../../showoff_images\", FilesystemIterator::SKIP_DOTS);
printf(\"There were %d Files\", iterator_count($fi));
$fi = iterator_count($fi);

#Divided $f1 by four to get the number of items in columns
$fby4 = intdiv($fi,4);

#Create start index for each image
$f0 = 0;
$f1 = $fby4-1;
$f2 = $fby4*2-1;
$f3 = $fby4*3-1;
$f4 = $fby4*4-1;

#CHECK THE INDEX FOR THE IMAGES. START AT 0 AND START ITERATING WITH THE $fn VALUES FOR THE FOLLOWING FUNCTION!
  #Iterates images
  $directory=\"../../showoff_images/\";
  $images=glob($directory . \"*.jpg\");
  $lazyload = \"lazy\";
  $measure = \"100%\";
  $distance = \"20px\";
  
  foreach($images as $image=>$value) {
    if($value > 4) continue;
      ++$value;
      echo 
      \"
      <h2 style = padding-top= \".$distance.\" padding-bottom= \".$distance.\" padding-right= \".$distance.\"  padding-left= \".$distance.\"></h2>
      <img src=\" .$image.\" loading =\". $lazyload .\" height=\".$measure.\" width=\".$measure.\">
      \";
      
      
      #++$f0;
      
  }

?>

非常感谢您的帮助，很高兴加入论坛！

所以你有一个图像数组，让我们称它们为 A 到 Z。你希望你的 HTML 是线性的 A、B、C、D、E、F、G、H ......还是你想要做A、E、I、M、B、F、J、N 之类的东西？
最好是这样：A|B|C|D E|F|G|H| I|J|K|L| M|N|O|P 等
嘿，答案没有正确显示，但想法是第一行有 ABCD，第二行有 EFGH，等等。
我没有看到你做任何特别的事情，比如将四个项目的每个“行”包装在一个 div 中，所以我认为你可以回显并让 flex/grid 处理其余的事情。如果您要包装它们，那么我认为array_chunk 会帮助您。 3v4l.org/HpTSH。希望有一天浏览器会原生支持Masonry
谢谢！您提供的链接似乎是一个不错的选择。今天晚些时候我会测试它，希望有好的结果。

标签： php css foreach

【解决方案1】：

评论回答

您应该可以为此使用array_chunk，这将允许您将数组分解为子数组。

这是一个示例，并没有真正绑定到您的数据，但它应该是有意义的。

$letters = range('a', 'z');
$rows = array_chunk($letters, 4);
foreach($rows as $row){
    echo '<div>', PHP_EOL;
    foreach($row as $letter) {
        echo $letter, PHP_EOL;
    }
    echo '</div>', PHP_EOL;
}

在这里演示：https://3v4l.org/HpTSH

【讨论】：