Php 在网格中平铺缩略图

我想使用bootstrap的网格类将缩略图平铺成3列，如下所示（此条目只有3个图像）：

第4个图像将转到

中的下一行

，第5和第6个图像位于同一行，但分开

。然后第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>

“alt=”“>

---

我已经找到了算法他：

<?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; ?>

小组标题
行：|列：

---

但是我一直在想如何找到要显示的屏幕截图索引。

在上面的输出中，行和列混淆了。 一旦这个问题得到解决，如果你需要一个整数索引，你应该能够根据行和列的值来计算它

也就是说，在Bootstrap中，您不需要以现有的方式创建单独的行。如果您将所有的col-sm-3 div一个接一个地放置，而不拆分新行，那么无论如何，这将自行解决问题。

---

通过这种方式，您可以使用列Xxx为不同的屏幕宽度指定不同的列数，而无需更改代码。

诀窍是在一列中发送由

定义的每一个新数据，并在每三个项后调用

，以便在一行中有三个项。这可以通过使用计数器i来完成在0处初始化，然后每次将其值递增1，并在除以3时插入新行，结果为整数：

 $count = 0;
 if (is_int($count/3)){
       echo '<div class="row">';
 }

if(is_int($count/3)){
   echo '</div>' ;
}

$count=0；
如果（是整（$count/3））{
回声'；
}

我们需要在第一个元素之前插入一个div，以便检查它是否是起始元素：

if ($count==0  OR is_int($count/3)){
   echo '<div class="row">';
}

如果（$count==0或为整（$count/3））{
回声'；
}

然后，为了关闭div，我们需要再次检查除法结果是否为整数：

 $count = 0;
 if (is_int($count/3)){
       echo '<div class="row">';
 }

if(is_int($count/3)){
   echo '</div>' ;
}

if（整数（$count/3））{
回声'；
}

我们还需要在最后一个元素之后关闭div，以便通过以下方式检查该元素是否为最后一个元素：

if($count==$total_entries OR is_int($count/3)){
   echo '</div>' ;
}

if（$count==$total\u条目或is\u int（$count/3））{
回声'；
}

完整代码为：

<?php 
      $count = 0;
      $total_entries = count($screenshots);

      foreach($screenshots as $key=>$screenshot): 
      if ($count==0  OR is_int($count/3)){
      echo '<div class="row">';
      }
      ?> 

        <div class="column-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
    $count++;
    if($count==$total_entries OR is_int($count/3)){
    echo '</div>' ;
    }
    endforeach;  
?>

" 
alt=”“>

Man，您不必在一个row div中每3列换行一次，它们会自动换行…在上面的示例输出中，您的行和列混合在一起。感谢您提供有关引导的信息。。我回来后会试试的