Kolommen opmaak met PHP loop
Wie o wie kan mij op weg helpen.
Via een foreach loop word een array met categorieën uitgelezen.
Deze wil ik presenteren in een kolommen opmaak.
Als voorbeeld heb ik de volgende categorieën
- Boeken
- Films
- Muziek
- Kantoor
- Meubels
- Spellen
Ik wil 3 kolommen maken, die er dan als volgt uitzien
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<div class="column-1">
<span>Boeken</span>
<span>Meubels</span>
</div>
<div class="column-2">
<span>Films</span>
<span>Muziek</span>
</div>
<div class="column-3">
<span>Kantoor</span>
<span>Spellen</span>
</div>
<span>Boeken</span>
<span>Meubels</span>
</div>
<div class="column-2">
<span>Films</span>
<span>Muziek</span>
</div>
<div class="column-3">
<span>Kantoor</span>
<span>Spellen</span>
</div>
Ze worden dus op alfabetische volgorde verdeeld over de 3 kolommen.
Zelf dacht ik aan modulus te gebruiken maar hoe stel ik die kolommen hierop in?
Gewijzigd op 19/02/2021 05:26:42 door - Ariën -
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?php
$categorie = ['Boeken', 'Films', 'Muziek', 'Kantoor', 'Meubels', 'Spellen'];
$einde = count($categorie) - 1; // voor oneven kolommen
foreach ($categorie as $kolom => $naam) {
if ($kolom % 2 == 0) {print '<div class="column-' . ((int) $kolom / 2 + 1) . '">' . PHP_EOL;}
print ' <span>' . $naam . '</span>' . PHP_EOL;
if ($kolom % 2 == 1 || $kolom == $einde) {print '</div>' . PHP_EOL;}
}
?>
$categorie = ['Boeken', 'Films', 'Muziek', 'Kantoor', 'Meubels', 'Spellen'];
$einde = count($categorie) - 1; // voor oneven kolommen
foreach ($categorie as $kolom => $naam) {
if ($kolom % 2 == 0) {print '<div class="column-' . ((int) $kolom / 2 + 1) . '">' . PHP_EOL;}
print ' <span>' . $naam . '</span>' . PHP_EOL;
if ($kolom % 2 == 1 || $kolom == $einde) {print '</div>' . PHP_EOL;}
}
?>
Thanks voor het meedenken. Jouw code heb ik geprobeerd maar dan word in kolom 1 de items 1 en 2 gezet en in kolom 2 de items 3 en 4 en in kolom 3 5 en 6.
Hieronder een schema wat ik zou willen
In kolom 1 zouden de items 1, 4, 7 etc moeten komen
In kolom 2 de items 2, 5, 8 etc
En kn kolom 3, 6, 9 etc
flex-direction:row;
Maar column als waarde kan ook.
Gewijzigd op 20/02/2021 00:48:56 door - Ariën -
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<?php
$kolommen = 3;
$items = [];
for ($i = 1; $i < 10; $i++) {$items[] = 'Item ' . $i;}
$aantal = count($items);
for ($kolom = 0; $kolom < $kolommen; $kolom++) {
print '<div class="column-' . ($kolom + 1) . '">' . PHP_EOL;
for ($i = $kolom; $i < $aantal; $i += $kolommen) {
print ' <span>' . $items[$i] . '</span>' . PHP_EOL;
}
print '</div>' . PHP_EOL;
}
?>
$kolommen = 3;
$items = [];
for ($i = 1; $i < 10; $i++) {$items[] = 'Item ' . $i;}
$aantal = count($items);
for ($kolom = 0; $kolom < $kolommen; $kolom++) {
print '<div class="column-' . ($kolom + 1) . '">' . PHP_EOL;
for ($i = $kolom; $i < $aantal; $i += $kolommen) {
print ' <span>' . $items[$i] . '</span>' . PHP_EOL;
}
print '</div>' . PHP_EOL;
}
?>
Nu is het aantal kolommen dynamisch via $kolommen.