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

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>

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

我尝试使用modulo（%）进行计算 - 类似于$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类这样的东西。

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

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

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

把这一切放在一起，你的完整脚本看起来像这样：

$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的演示