Question

所以我写了一个代码使4张（或更多）照片具有响应性（类似于Pinboard），但我不知道如何使照片随机化。

示例：您访问该页面，然后看到img A：B：C：D然后，刷新页面时，将出现另一组图像。我知道有很多教程可以对照片进行随机化处理，但是我没有找到与我创建的类似设计一样的东西。

真的可以使用一些帮助来理解我需要添加哪些代码以使照片在每次刷新页面时都发生变化，而不是总是显示相同的照片。

这里有我的代码：

<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: Arial;
}

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

.row {
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 */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}

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

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

/* Responsive layout - makes the two columns stack on top of each other 
instead of next to each other */
@media screen and (max-width: 600px) {
.column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
}
}
</style>
<body>

<!-- Header -->
<div class="header">
<h1>Responsive Image Grid</h1>
<p>Testing system.</p>
</div>

<!-- Photo Grid -->
<div class="row"> 
<div class="column">
<img src="/public/admin/haleyfoxforabout333.jpg" style="width:100%">

</div>
<div class="column">
<img src="/public/user/2c/04/d72477bc8b54505d2027a5966f941252.jpg" 
style="width:100%">

</div>  
<div class="column">
<img src="/public/album_photo/3b/04/0196544bb5fdd97b9a40e49327394756.jpg" 
style="width:100%">

</div>
<div class="column">
<img src="/public/user/ca/03/8a344be65723d3d001f1b34acb5f6742.jpg" 
style="width:100%">

</div>

</body>
</html>

在收到某人的建议后，

新代码。（仍无法正常工作会提示错误。）

  <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/user/2c/04/d72477bc8b54505d2027a5966f941252.jpg",
 "/public/user/ca/03/8a344be65723d3d001f1b34acb5f6742.jpg",           
 "/public/album_photo/3b/04/0196544bb5fdd97b9a40e49327394756.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="column">';
 echo '<img src="'..'" style="width:100%">';
 echo '</div>';
 }
 ?>    

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

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

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

 </div>

Answer 1

shuffle（）函数随机化数组中元素的顺序。

此函数为数组中的元素分配新的键。现有密钥将被删除

....
<?php

$pics = [
    "/public/admin/haleyfoxforabout333.jpg",
    "/public/user/2c/04/d72477bc8b54505d2027a5966f941252.jpg",
    "/public/user/ca/03/8a344be65723d3d001f1b34acb5f6742.jpg",
    "/public/album_photo/3b/04/0196544bb5fdd97b9a40e49327394756.jpg"
];

shuffle($pics);
?>
<body>

<!-- Header -->
<div class="header">
<h1>Responsive Image Grid</h1>
<p>Testing system.</p>
</div>

<!-- Photo Grid -->
<div class="row">

    <?php
    foreach($pics as $pic){
        echo '<div class="column">';
        echo '<img src="'..'" style="width:100%">';
        echo '</div>';
    }
    ?> 
</div>
</body>
.

完整代码：

这里有我的代码：

<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: Arial;
}

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

.row {
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 */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}

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

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

/* Responsive layout - makes the two columns stack on top of each other 
instead of next to each other */
@media screen and (max-width: 600px) {
.column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
}
}
</style>
<body>

<!-- Header -->
<div class="header">
<h1>Responsive Image Grid</h1>
<p>Testing system.</p>
</div>

<!-- Photo Grid -->
<div class="row"> 
<div class="column">
<img src="/public/admin/haleyfoxforabout333.jpg" style="width:100%">

</div>
<div class="column">
<img src="/public/user/2c/04/d72477bc8b54505d2027a5966f941252.jpg" 
style="width:100%">

</div>  
<div class="column">
<img src="/public/album_photo/3b/04/0196544bb5fdd97b9a40e49327394756.jpg" 
style="width:100%">

</div>
<div class="column">
<img src="/public/user/ca/03/8a344be65723d3d001f1b34acb5f6742.jpg" 
style="width:100%">

</div>

</body>
</html>

在收到某人的建议后，

新代码。（仍无法正常工作会提示错误。）

  <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/user/2c/04/d72477bc8b54505d2027a5966f941252.jpg",
 "/public/user/ca/03/8a344be65723d3d001f1b34acb5f6742.jpg",           
 "/public/album_photo/3b/04/0196544bb5fdd97b9a40e49327394756.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="column">';
 echo '<img src="'.$pic.'" style="width:100%">';
 echo '</div>';
 }
 ?>    

 </div>

需要使照片以随机顺序出现，但要保持并排响应。

1 个答案: