Как равномерно распределить данные в 4 столбца в php?

Question

Я делаю проект на PHP, который вытаскивает изображения со страницы Facebook с помощью Facebook SDK. Я использую цикл для эха 40 различных изображений, я хочу распределить эти изображения равномерно между 4 различными столбцами начальной загрузки, как показано ниже.

Column1  Column2  Column3  Column4 
Image1  Image2  Image3  Image4 
Image5  Image6  Image7  Image8 

Петля настоящее время я использую эхо изображений в одну колонку:

foreach($rData as $post) { 
    $image = ('<center><img class="img-responsive" src="'.$post->getProperty('full_picture').'"/>'.'</br></center>'); 
    print('<div class="col-sm-12">'.$image.'</div'); 
    } 

Я провел некоторое время, пытаясь понять это, но никогда не может казаться, распространять данные без необходимости его повторение. Любая помощь будет оценена, спасибо заранее.

Answer 1

Использование array_chunk:

foreach(array_chunk($rData, 4) as $chunk) 
{ 
    print('<div class="row">'); 
    foreach($chunk as $post) { 
     $image = ('<center><img class="img-responsive" src="'.$post->getProperty('full_picture').'"/>'.'</br></center>'); 
     print('<div class="col-sm-3">'.$image.'</div>'); 
    } 
    print('</div>'); 
} 

Answer 2

Вы можете проверить, когда последний элемент (4) в вашей линии, и положить что-то (HTML элемент) в разбитое на следующую строку:

$i = 0; 

foreach($rData as $post) { 
    $myDivisor = '' //nothing yet 

    if(($i%4) == 0) 
     $myDivisor = 'something...'; 

    $image = ('<center><img class="img-responsive" src="'.$post->getProperty('full_picture').'"/>'.'</br></center>'); 

    print('<div class="col-sm-12">'.$image.'</div>'.$myDivisor); 

    $i++; 

... 

Answer 3

Изменение:

print('<div class="col-sm-12">'.$image.'</div'); 

Для :

print('<div class="col-sm-3">'.$image.'</div'); 

Bootstrap использует решетку с 12 колонками. Если вы укажете каждому элементу только три из этих столбцов, вы получите 4 на большом экране.

См. Также this answer, чтобы помочь вам определить, как далеко вниз по размеру экрана вы хотите сохранить эти 4 столбца, прежде чем достичь точки разрыва.