Плитка Эскизы в сетке

Question

Я хочу мозаичные эскизы на 3 столбцы с использованием классов сетки Bootstrap как это (эта запись имеет только 3 картинки):

4-изображение будет перейти к следующей строке <div class="row"></div> в пределах <div class="col-sm-4"></div> , 5-е и 6-е изображения в том же ряду, но отдельно <div class="col-sm-4"></div>. Затем 7-е изображение переходит в 3-й ряд и т. Д.

Детали изображений, включая URL-адреса, берутся из БД с использованием php.

<div class="panel-body"> 
    <?php foreach($screenshots as $key=>$screenshot): ?> 
    <div class="col-sm-4"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h3 class="panel-title"><?=$screenshot["ss_name"]?></h3> 
      </div> 
      <div class="panel-body"> 
       <img class="img-rounded" style="display: block; text-align:center;" src="<?=UPLOADS_FOLDER.$screenshot['ss_url']?>" alt="<?=$screenshot['ss_name']?>"> 
       <p><?=$screenshot["ss_description"]?></p> 
      </div> 
     </div> 
    </div> 
    <?php endforeach; ?> 
</div> 

---

мне удалось выяснить algorithim:

<?php 
$total_entries = count($screenshots); 
$total_cols = 3; 
$total_rows = ceil($total_entries/$total_cols); 

for($col = 0; $col < $total_cols; ++$col): 
?> 
    <div class="row" style="margin: 1% 0.5%;"> 
    <?php for($row = 0; $row < $total_rows; ++$row): ?> 
     <div class="col-sm-4"> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">Panel Title</h3> 
       </div> 
       <div class="panel-body"> 
        row: <?=$row?> | col: <?=$col?> 
       </div> 
      </div> 
     </div> 
    <?php endfor; ?> 
    </div> 
<?php endfor; ?> 

Но я застрял, пытаясь выяснить, как найти индекс скриншота показывать.

Answer 1

У вас есть строка и столбец, смешавшиеся в выводе выше. После того, как это исправлено, если вам нужен целочисленный индекс, вы сможете рассчитать его из значений строк и столбцов. Для нулевого массива изображений, например, (строка * 3) + столбец

Это означает, что в Bootstrap вам не нужно создавать отдельные строки так, как вы. Если вы поместите все div-col-sm-3 один за другим, не выбирая новые строки, это все равно будет сортироваться. Выполняя эту процедуру, вы можете использовать col-Xxx для указания разных номеров столбцов для разных ширины экрана без изменения кода.