У меня есть приведенный ниже рабочий код для извлечения изображений из базы данных mysqli_fetch_array() и загрузка изображений в layout grid в JQuery Mobile 1.2.0.
Структура layout grid JQuery Mobile использует встроенную стилизованную сетку / блоки, ограниченную пятью столбцами, ui-block-a up до ui-block-e . Следовательно, я должен придерживаться стилей JQM.
ПРИМЕЧАНИЕ. Я использую четыре структуры столбцов, ui-block-a ui-block-d
Чтобы загрузить восемь (8) изображений в блоки и правильно их создать, я должен использовать эти классы ui-block-a, -b, -c, -d для первой строки из четырех изображений и тех же классов для второй ряд из четырех изображений.
Я использовал foreach (array(a, b, c, d, a, b, c, d) as $i) внутри while loop но получил дублированные результаты.
Код работает нормально, но мне было интересно, есть ли другие возможности для достижения желаемой структуры, удалив все IF-statements .
Код:
while ($row = mysqli_fetch_array($query)) { $img = $row["fn"]; if (empty($img)) { break; } $thumb = 'images/th_'.$img; if ($count == 8) { break; } // limited to 8 images/results if ($count == 0) $i = 'a'; //first 4 imgs row classes if ($count == 1) $i = 'b'; if ($count == 2) $i = 'c'; if ($count == 3) $i = 'd'; if ($count == 4) $i = 'a'; //second 4 imgs row classes if ($count == 5) $i = 'b'; if ($count == 6) $i = 'c'; if ($count == 7) $i = 'd'; $ths.='<div class="ui-block-'.$i.'"><img src="'.$thumb.'"></div>'; $count = $count + 1; };
Результат:
<div class="ui-grid-c"> <!-- First row --> <div class="ui-block-a"><img src="img1.jpg"></div> <div class="ui-block-b"><img src="img2.jpg"></div> <div class="ui-block-c"><img src="img3.jpg"></div> <div class="ui-block-d"><img src="img4.jpg"></div> <!-- Second row --> <div class="ui-block-a"><img src="img5.jpg"></div> <div class="ui-block-b"><img src="img6.jpg"></div> <div class="ui-block-c"><img src="img7.jpg"></div> <div class="ui-block-d"><img src="img8.jpg"></div> </div>
Заранее спасибо!