Итак, я написал код, чтобы сделать 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>