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

Question

我正在为我的页面使用 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，如果该行只显示 2 张图像，则使用 col-md-12，对于单个图像 col-md-24图片。

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

Answer 1

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

$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>';
}

这就是事情变得有趣的地方。基于当前 $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 列网格不是五的倍数，这将表明列宽为 4.8 -- 而且没有 col-md-4.8 class.

这样的东西

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

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

Your sample array contains a full <img src="..."> tag in image with a separate description that you seem to want as the image's alt attribute. That's a bit more complex and out of scope for the "how do I render these images in a grid" question, for simplicity's sake I assumed image would contain just the src attribute.

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

$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

查看实际演示

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

Calculating the number of columns an image would use based on how many total images are available

php

twitter-bootstrap

twitter-bootstrap-3

modulo