文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用循环逐行渲染3幅图像

问如何使用循环逐行渲染3幅图像
EN

Stack Overflow用户

提问于 2019-06-20 13:20:45

回答 2查看 930关注 0票数 1

问题只是逻辑上的。我正在尝试制作一个图片库，从数据库中获取图像的url…问题是当我在HTML中渲染的时候。我正在使用bootstrap进行布局。每行有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>

php

html

bootstrap-4

logic

回答 2

Stack Overflow用户

发布于 2019-06-20 13:37:34

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

<?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个项的组，然后遍历所有组，创建行，然后遍历组元素以输出每个元素。它是2个foreach (或者我猜在您的例子中是for )循环

票数 1

Stack Overflow用户

发布于 2019-06-20 13:51:58

解决方案非常简单。正如您所提到的，您有一个图像数组。您可以设置每行三个图像。

 <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'];?>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56679410

复制

相似问题

问如何使用循环逐行渲染3幅图像
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用循环逐行渲染3幅图像EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用循环逐行渲染3幅图像
EN