在网格中平铺缩略图
Posted
技术标签:
【中文标题】在网格中平铺缩略图【英文标题】:Tile Thumbnails in a Grid 【发布时间】:2016-06-02 18:37:38 【问题描述】:我想像这样使用引导程序的网格类将缩略图平铺成 3 列(该条目只有 3 个图像):
第 4 幅图像将转到 <div class="col-sm-4"></div>
中的下一行 <div class="row"></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']?>" >
<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; ?>
但我一直在试图弄清楚如何找到要显示的屏幕截图的索引。
【问题讨论】:
伙计,您不必将每 3 列包装在一个行 div 中,它们会自动相互包装... 您在上面的示例输出中混合了行和列。 【参考方案1】:您在上面的输出中混合了行和列。 一旦确定,如果您需要一个整数索引,您应该能够从行和列值计算它。对于从零开始的图像数组,例如 (row*3)+column
也就是说,在 Bootstrap 中,您不需要按照自己的方式创建单独的行。如果您将所有 col-sm-3 div 一个接一个地放置,而不打破新行,无论如何这都会自行解决。 这样做,您可以使用 col-Xxx 为不同的屏幕宽度指定不同的列数,而无需更改代码。
【讨论】:
感谢您提供有关 Bootstrap 的信息。我回来后会尝试一下【参考方案2】:诀窍是将每个新数据发送到由<div class="column-sm-4">
定义的单个列中,并且为了连续三个项目,每三个项目后调用<div class="row">
。这可以通过使用初始化为 0 的计数器然后每次将其值增加 1 并在将其除以 3 时插入新行来实现整数:
$count = 0;
if (is_int($count/3))
echo '<div class="row">';
我们需要在第一个元素之前插入一个 div 来检查它是否是开始的:
if ($count==0 OR is_int($count/3))
echo '<div class="row">';
然后为了关闭 div,我们需要再次检查除法是否为整数:
if(is_int($count/3))
echo '</div>' ;
我们还需要在最后一个元素之后关闭 div,这样我们就可以通过以下方式检查该元素是否是最后一个:
if($count==$total_entries OR is_int($count/3))
echo '</div>' ;
完整代码为:
<?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']?>"
>
<p><?=$screenshot["ss_description"]?></p>
</div>
</div>
</div>
<?php
$count++;
if($count==$total_entries OR is_int($count/3))
echo '</div>' ;
endforeach;
?>
【讨论】:
以上是关于在网格中平铺缩略图的主要内容,如果未能解决你的问题,请参考以下文章