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

标签 php css html

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

示例:您访问该页面并看到 img A: B: C :D 然后当您刷新页面时，会出现一组不同的图像。我知道有很多教程可以使照片随机化，但我还没有找到任何与我创建的类似插板的设计相关的内容。

确实需要一些帮助来理解我需要添加哪些代码来使照片随着每次页面刷新而变化，而不是总是显示相同的照片。

Showing how front end looks.

这是我的代码:

<!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>

最佳答案

The shuffle() function randomizes the order of the elements in the array.

This function assigns new keys for the elements in the array. Existing keys will be removed

....
<?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>

关于php - 需要使照片以随机顺序出现，但要保持并排响应。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52670050/

上一篇：javascript - Bootstrap : Better way of lining up elements in columns and rows when you have to skip some

下一篇：html - 在不破坏垂直对齐的情况下定位另一个 div

相关文章：

javascript - 我可以使用 JS 或 CSS 添加一个按钮来开始和停止过渡吗？

php - 如何下载更新压缩包并安装？

php - 如果等于在 PHP 和 MySQL 中输入的值，则显示内容

html - 剪切可变宽度 HTML 表格中的一列

javascript - 失去焦点时提交表单

javascript - fadeOut() 隐藏了所有的header 而我只想隐藏h1

php - 向 Wordpress 主题添加子菜单

php - 无法更新到 php 5.4 - AWS ec2

html - 溢出滚动在固定 div 中不起作用？

css - Angular Renderer2 无法添加类

©2024 IT工具网  联系我们