如何迭代拆分PHP数组并按列分配元素到3个不同div中

要实现按列分配元素的效果，不需要复杂的数组切片操作，直接利用索引步长遍历即可。3列场景下的元素分配规律非常明确：第1列取索引0、3、6的元素，第2列取索引1、4、7的元素，第3列取索引2、5、8的元素，刚好匹配你需要的分配规则。

完整可运行代码 #

<?php
// 待渲染的原始数组
$array = array("item 1", "item 2", "item 3", "item 4", "item 5", "item 6", "item 7", "item 8", "item 9");
$columnCount = 3; // 定义拆分的总列数
?>
<style>
.wrapper {
  display: flex;
  /* 修复原示例笔误：colum为错误拼写，横向排列三列需取值row */
  flex-direction: row;
  gap: 80px;
}
.wrapper > div {
  display: flex;
  flex-direction: column;
}
</style>

<div class="wrapper">
<?php for ($colIndex = 0; $colIndex < $columnCount; $colIndex++): ?>
  <div>
    <?php
    // 以列数为步长遍历，取出当前列对应的所有元素
    for ($i = $colIndex; $i < count($array); $i += $columnCount) {
        echo "<p>{$array[$i]}</p>";
    }
    ?>
  </div>
<?php endfor; ?>
</div>

常见问题说明 #

• 你之前参考的同类方案大多是行优先拆分逻辑：即把数组按每3个元素切为一个子数组，第一个子数组全部放入第一列，和你需要的列优先穿插分配逻辑完全不同，自然达不到预期效果。
• 你给出的CSS示例存在拼写错误：flex-direction: colum 是无效属性值，要实现三个div横向并排的三列效果，属性值必须设置为row；如果误写为column，三个div会从上到下纵向堆叠，布局完全错乱。
• 该写法兼容任意长度的数组，即使数组元素总数不是3的倍数，也能自动完成元素分配，不需要额外计算每列的元素个数，逻辑比array_chunk等数组拆分函数更适配列优先的渲染场景。

内容的提问来源于stack exchange，提问作者Jude Joshua