I am trying to create a mock up of a three-column Pinterest layout that scans a directory of images and puts 1/3 of the images in each of the columns.
But I can't figure out how to get the correct images to show up in the column.
It's not important that all the images are included, I just want the columns to be look moderately even.
Here's what I have so far, but obviously this just lists all the images in each of the columns.
<?php
$dir = 'img';
$files = scandir($dir);
$count = round((count($files)/3), 0);
?>
<div class="column">
<?php
foreach ($files as $file) { // 1/3 of the images
if ($file != "." && $file != "..") {
echo "<img src=\"img/" . $file . "\">" . "
";
}
}
?>
</div>
<div class="column">
<?php
foreach ($files as $file) { // 1/3 of the images
if ($file != "." && $file != "..") {
echo "<img src=\"img/" . $file . "\">" . "
";
}
}
?>
</div>
<div class="column">
<?php
foreach ($files as $file) { // 1/3 of the images
if ($file != "." && $file != "..") {
echo "<img src=\"img/" . $file . "\">" . "
";
}
}
?>
</div>
Update:
Ultimately I used this
<?php
$dir = 'img';
$files = scandir($dir);
$count = round((count($files)/3), 0);
?>
<div class="column">
<?php
// 1/3 of the images
for ($i = 0; $i < floor(count($files) / 3); $i++) {
$file = $files[$i];
if ($file != "." && $file != "..") {
echo "<img src=\"img/" . $file . "\">" . "
";
}
}
?>
</div>
<div class="column">
<?php
// 2/3 of the images
for ($i = floor(count($files) / 3); $i < floor(count($files) / 3) * 2; $i++) {
$file = $files[$i];
if ($file != "." && $file != "..") {
echo "<img src=\"img/" . $file . "\">" . "
";
}
}
?>
</div>
<div class="column">
<?php
// 3/3 of the images
for ($i = floor(count($files) / 3) * 2; $i < count($files); $i++) {
$file = $files[$i];
if ($file != "." && $file != "..") {
echo "<img src=\"img/" . $file . "\">" . "
";
}
}
?>
</div>
