CODEWITHSUNDEEP
phparrayslayoutforeach
rib3ye
rib3ye

Reputation: 2923

Creating three divs with each containing 1/3 of the content

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 . "\">" . "\n";
            }
        }
    ?>
</div>

<div class="column">
    <?php 
        foreach ($files as $file) { // 1/3 of the images
            if ($file != "." && $file != "..") {
                    echo "<img src=\"img/" . $file . "\">" . "\n";
            }
        }
    ?>
</div>

<div class="column">
    <?php 
        foreach ($files as $file) { // 1/3 of the images
            if ($file != "." && $file != "..") {
                    echo "<img src=\"img/" . $file . "\">" . "\n";
            }
        }
    ?>
</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 . "\">" . "\n";
        }
    }
?>
</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 . "\">" . "\n";
            }
        }
    ?>
</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 . "\">" . "\n";
            }
        }
    ?>
</div>

Upvotes: 0

Views: 86

Answers (2)

Bart
Bart

Reputation: 27205

$num = 0;
$col = 0; // column number: 0, 1 or 2
foreach ($files as $file) { // 1/3 of the images
    if ($file != "." && $file != "..") {
        if ($num++ % 3 == $col) {
            echo "<img src=\"img/" . $file . "\">" . "\n";
        }
    }
}

Upvotes: 0

hek2mgl
hek2mgl

Reputation: 157947

I would use for loops, like this:

// 1/3 of the images
for ($i = 0; $i < floor(count($files) / 3); $i++) {
    $file = $files[$i];

// 2/3 of the images
for ($i = floor(count($files) / 3); $i < floor(count($files) / 3) * 2; $i++) {
    $file = $files[$i];

// 3/3 of the images
for ($i = floor(count($files) / 3) * 2; $i < count($files); $i++) {
    $file = $files[$i];

Upvotes: 1

Related Questions