Php 编写了一个代码来显示随机照片，但在给定时间只需要显示四个img

因此，我有一个本质上是响应的代码，应该将四（4）张照片并排放置，并以随机顺序显示照片

然而，因为我刚刚开始，我不知道如何创建一个代码，以确保在任何给定的时间只有四（4）张照片显示

因此，根据我下面提供的代码，我如何一次只显示四张照片。（尽管我希望至少有八（8）张可能的照片可以进行排序。）

使用的代码：

<br>
<br>
<h50><?php echo $this->translate('Be Discovered!'); ?></h50>
and connected. Meet anyone & see everything!</a></p>
<br>

<?php

$pics = [
    "/public/admin/haleyfoxforabout333.jpg",
    "/public/admin/haleyfoxforabout333.jpg",
    "/public/admin/team5aboutG333.jpg",
    "/public/admin/team6about333.jpg",
    "https://www.w3schools.com/w3images/team1.jpg",
    "https://www.w3schools.com/w3images/team2.jpg",
    "https://www.w3schools.com/w3images/team3.jpg",
    "/public/admin/team4_333.jpg"
];

shuffle($pics);
?>

<style>

    h50 {
        padding: 0 30px 8px;
        width: auto;
        font-size: 40px;
        margin: 0 0 10px 0;
        background-color: transparent;
        border: none;
        border-bottom: 1px solid #D2DBE8;
        border-radius: 3px 3px 0 0;
        display: inline-block;
    }

    .headerz {
        text-align: center;
        padding: 32px;
    }

    .rowz {
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
        padding: 0 4px;
    }

    /* Create four equal columns that sits next to each other */
    .columnz {
        -ms-flex: 25%; /* IE10 */
        flex: 25%;
        max-width: 25%;
        padding: 0 4px;
    }

    .columnz img {
        margin-top: 8px;
        vertical-align: middle;
    }

    /* RL - makes a two column-layout instead of four columns */
    @media screen and (max-width: 800px) {
        .columnz {
            -ms-flex: 50%;
            flex: 50%;
            max-width: 50%;
        }
    }

    /* RL Takes the two columns stack on top of each other. */
    @media screen and (max-width: 600px) {
        .columnz {
            -ms-flex: 100%;
            flex: 100%;
            max-width: 100%;
        }
    }

</style>

<!-- Photo Grid -->
<div class="rowz">
    <?php
    foreach ($pics as $pic) {
        echo '<div class="columnz">';
        echo '<img src="' . $pic . '" style="width:100%">';
        echo '</div>';
    }
    ?>
</div>

并且连接。遇见任何人，看到一切



h50{
填充：0 30px 8px；
宽度：自动；
字体大小：40px；
裕度：0 10px 0；
背景色：透明；
边界：无；
边框底部：1px实心#D2DBE8；
边界半径：3px3px0；
显示：内联块；
}
海德兹先生{
文本对齐：居中；
填充：32px；
}
罗兹先生{
显示：-ms flexbox；/*IE10*/
显示器：flex；
-ms flex wrap:wrap；/*IE10*/
柔性包装：包装；
填充：0.4px；
}
/*创建四个相邻的相等列*/
columnz先生{
-ms flex:25%；/*IE10*/
弹性：25%；
最大宽度：25%；
填充：0.4px；
}
columnz先生{
边缘顶部：8px；
垂直对齐：中间对齐；
}
/*RL-制作两列布局，而不是四列布局*/
@媒体屏幕和屏幕（最大宽度：800px）{
columnz先生{
-ms-flex:50%；
弹性：50%；
最大宽度：50%；
}
}
/*RL将两列堆叠在一起*/
@媒体屏幕和屏幕（最大宽度：600px）{
columnz先生{
-ms-flex:100%；
弹性：100%；
最大宽度：100%；
}
}

使用

array\u rand

，它将从数组中随机提供键。第二个参数定义需要多少个键：

$keys = array_rand($pics, 4);
foreach ($keys as $key) {
    echo $pics[$key];
}

或者您可以切片洗牌数组：

shuffle($pics);
$pics = array_slice($pics, 0, 4); // reduces your array to 4 elements

或者您可以使用计数器和

break

foreach：

$counter = 0;
foreach($pics as $pic){
    if ($counter == 4) {
        break;
    }

    echo $pic;
    $counter++;
}

---

@AnthonySosa@u_mulder只有第二个和第三个选项（只要数组被洗牌）才能保证唯一性，对吗？据我所知，

array\u rand

可以返回重复的元素。@u\u mulder代码工作得很好。一个附带的问题是，是否有代码确保同一张照片不会显示两次。四张照片中的两张是完全相同的照片？但我不希望发生这种情况。@msgI问的问题与我目前正在使用的选项2相同，它正在创建重复项。@AnthonySosa在您的情况下可能是因为您的数组中有重复项（第一个和第二个）。@msg谢谢您忽略了这一点。