php - 在网格中平铺缩略图

Question

我想像这样使用 bootstrap 的网格类将缩略图平铺成 3 列(此条目只有 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>

---

我已经设法找出算法:

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

您在上面的输出中混淆了行和列。一旦确定，如果您需要一个整数索引，您应该能够从行和列值计算它。对于从零开始的图像数组，类似于 (row*3)+column

也就是说，在 Bootstrap 中，您不需要按照现有的方式创建单独的行。如果你把所有的 col-sm-3 div 一个接一个地放置，而不分解新的行，无论如何这都会自行解决。这样做，您可以使用 col-Xxx 为不同的屏幕宽度指定不同的列数，而无需更改代码。