HTML — Как отобразить макет с переменным количеством элементов в массиве (PHP)
Если я дам вам array из объектов, давайте предположим, что есть x количество объектов, как бы вы сделали следующее, используя сеточную систему (начальная загрузка, фундамент … не имеет значения):
Цикл над массивом и создать что-то, что копирует:
Нет, я смог создать это, выполнив:
echo "<div class='row'>";
for($i = 0; $i < count($options['fields']); $i++) {
// Increate the value of I and convert it from 1 to one.
$numberToWord = new FreyaTheme\NumberToWord\Conversion();
$wordRepersentation = $numberToWord->convert($i + 1);
if (isset($options['fields']['logo_image_' . $wordRepersentation])) {
if ($i <= 2) {
echo '<div class="medium-4 columns r3x1">';
echo '<img src="'.$options['fields']['logo_image_' . $wordRepersentation].'" />';
echo '</div>';
} else if ($i <= 6) {
echo '<div class="medium-3 columns r4x1">';
echo '<img src="'.$options['fields']['logo_image_' . $wordRepersentation].'" />';
echo '</div>';
} else if ($i <= 9) {
echo '<div class="medium-4 columns r3x1">';
echo '<img src="'.$options['fields']['logo_image_' . $wordRepersentation].'" />';
echo '</div>';
}
}
}
echo "</div>";
Теперь это, хотя и немного грязно с логикой здесь — работает для 10 пунктов. Теперь представьте, что я даю вам 800. или 8, или 2, или 1, или … вы поняли. Независимо от того, сколько предметов я дам вам, этот шаблон, этот макет коробки должен повторяться. Мне все равно, если вы дадите мне 6 или 6000 предметов.
Я могу сделать это с 10, но я не знаю, как масштабировать его. Идеи?
Решение
Ну, это одно из решений. Конечно, вы должны сами настроить его и использовать классы CSS вместо встроенного CSS:
<div style="padding: 5px; text-align:center;">
<?php
for($i = 0; $i < 5; ++$i)
{
?>
<div>
<?php
//output 3
if ($i%2 == 0)
{
for($cell=0;$cell<3;++$cell)
{
?>
<div style="display:inline-block; border:1px solid #000; width: 200px; margin-bottom: 10px;">
<span style="padding: 40px; display:inline-block; text-align:center;">350*150</span>
</div>
<?php
}
}
//output 4
else
{
for($cell=0;$cell<4;++$cell)
{
?>
<div style="padding: 5px; display:inline-block; border:1px solid red; width: 138px; margin-bottom: 10px;">
<span style="padding: 30px; display:inline-block; text-align:center;">350*150</span>
</div>
<?php
}
}
?>
</div>
<?php
}
?>
</div>
Другие решения
Других решений пока нет …