时间戳

首页 > 解决方案 > 根据可用的总图像数计算图像将使用的列数

php - 根据可用的总图像数计算图像将使用的列数

问题描述

我正在为我的页面使用Twitter Bootstrap 3.3的自定义 24 列布局，并且我需要显示可变数量的图像。

我的最终目标是拥有类似的东西

$images = array(
  array("image" => "<img src='...'>", "description" => "Desc 1"),
  array("image" => "<img src='...'>", "description" => "Desc 2"),
  array("image" => "<img src='...'>", "description" => "Desc 3"),
  array("image" => "<img src='...'>", "description" => "Desc 4")
);

显示如下结构：

<div class="row">
  <div class='col-md-8'><img src="..." alt="Desc 1" /></div>
  <div class='col-md-8'><img src="..." alt="Desc 2" /></div>
  <div class='col-md-8'><img src="..." alt="Desc 3" /></div>
  <div class='col-md-24'><img src="..." alt="Desc 4" /></div>
</div>

逻辑是，我希望一行最多有 3 张图像，如果该行col-md-8上col-md-12只显示 2 张图像，则col-md-24使用单个图像。

我尝试使用模 ( %) 进行计算 - 类似于$mod = 24 % count($images);and$mod = 3 % count($images);但这些显然是错误的。

标签： phptwitter-bootstraptwitter-bootstrap-3modulo

解决方案

我们需要在多个地方每行的图像数量，所以把它放在一个变量中，以便将来更容易改变：

$imagesPerRow = 3;

让我们首先弄清楚您将拥有多少行：

$numberOfRows = ceil(count($images) / $imagesPerRow);

我正在使用ceil()，因为图像的数量可能不是三的倍数。如果您有四张图片，将4 / 3四舍五入告诉我们我们需要两行才能显示所有图片。1.33333...ceil()2

现在我们可以创建一个循环来为我们渲染每一行：

for ($row = 0; $row < $numberOfRows; $row++) {
    echo '<div class="row">';

    // we'll output the images here in a minute

    echo '</div>';
}

这就是事情变得有趣的地方。基于 current $row，我们需要获取下一个$imagesPerRow图像：

    $offset = $row * $imagesPerRow;
    $imagesInRow = array_slice($images, $offset, $imagesPerRow);

$imagesInRow现在将包含 1、2 或 3 张图像。我们可以使用它来计算该行的列宽：

    $columnWidth = 24 / count($imagesInRow);

如果有一个图像，$columnWidth将是24。对于两个图像，它将是12，对于三个图像，它将是8。如果有一天你决定要连续四张图像而不是三张，那么$imagesInRow可以包含四张图像并且$columnWidth可能变成6. 请记住，如果您想要连续五个图像，这将成为一个问题，因为您的 24 列网格不是 5 的倍数，这将指示列宽4.8- 并且没有类这样的东西col-md-4.8。

所以现在我们有了列宽和（最多）3个我们想要显示的图像，我们可以这样做：

    foreach ($imagesInRow as $image) {
        echo '<div class="col-md-' . $columnWidth . '">';
        echo '<img src="' . $image['image'] .'" alt="' . $image['description'] .'">';
        echo '</div>';
    }

您的示例数组包含一个完整的<img src="...">标签，其中包含一个您似乎想要作为图像属性image的单独标签。这有点复杂，超出了“如何在网格中渲染这些图像”问题的范围，为简单起见，我假设只包含属性。descriptionaltimagesrc

将所有这些放在一起，您的完整脚本将如下所示：

$imagesPerRow = 3;
$numberOfRows = ceil(count($images) / $imagesPerRow);

for ($row = 0; $row < $numberOfRows; $row++) {
    echo '<div class="row">';

    $offset = $row * $imagesPerRow;
    $imagesInRow = array_slice($images, $offset, $imagesPerRow);
    $columnWidth = 24 / count($imagesInRow);

    foreach ($imagesInRow as $image) {
        echo '<div class="col-md-' . $columnWidth . '">';
        echo '<img src="' . $image['image'] .'" alt="' . $image['description'] .'">';
        echo '</div>';
    }

    echo '</div>';
}

在https://3v4l.org/1eTZd上查看演示

推荐阅读