Question

问题只是合乎逻辑的... 我正在尝试创建一个从数据库获取图像网址的照相馆... 问题是当我用HTML渲染时。我正在使用引导程序进行布局。每行都有3张图像，当我花点时间渲染图像时，我不知道如何仅使用循环就可以逐行渲染3张图像。

我使用的是PHP，但为了便于说明编写了一些草稿代码。

我正在尝试做类似的事情：

 for(result in array){
    <div class="row tattos-row">
        <div class="col-sm">
            <img class="img-portifolio" src="result[URL]">
        </div>
    </div>
 }

我期待这个结果：

<div class="row tattos-row">
    <div class="col-sm">
        <img class="img-portifolio" src="url_1">
    </div>
    <div class="col-sm">
        <img class="img-portifolio" src="url_2">
    </div>
    <div class="col-sm">
        <img class="img-portifolio" src="url_3">
    </div>
</div>

<div class="row tattos-row">
    <div class="col-sm">
        <img class="img-portifolio" src="url_4">
    </div>
    <div class="col-sm">
        <img class="img-portifolio" src="url_5">
    </div>
    <div class="col-sm">
        <img class="img-portifolio" src="url_6">
    </div>
</div>

Answer 1

嘿，从语法上看，它看起来像是一些模板工具，但是逻辑上是这样的

<?php $chunks = array_chunk($data, 3); ?>
<?php foreach ($chunks as $chunk): ?>
    <div class="row tattos-row">
        <?php foreach ($chunk as $item): ?>
            <div class="col-sm">
                <img class="img-portifolio" src="<?= $item['url'] ?>">
            </div>
        <?php endforeach; ?>
    </div>
<?php endforeach; ?>

根据需要检查array_chunk方法（https://www.php.net/manual/en/function.array-chunk.php）-您只想创建3个项目的组，然后遍历所有组，创建行，然后遍历group元素以输出每个元素。这是2个foreach循环（或者我猜是您的情况）

Answer 2

解决方案非常简单。正如您提到的那样，您有一系列图像。您可以每行设置三张图像。

 <div class="container">
    <div class="row">
        <?php for($i=0;$i<count($array);$i++){?>
            <div class="col-sm-4">
                <img src="<?php echo $array[$i]?>" alt="">
            </div>
        <?php } ?>
    </div>
</div>

php代码如下所示：

<?php $array = ['https://i.pravatar.cc/150?img=3','https://i.pravatar.cc/150?img=32','https://i.pravatar.cc/150?img=33','https://i.pravatar.cc/150?img=34','https://i.pravatar.cc/150?img=35'];?>

如何使用循环逐行渲染3张图像

2 个答案: