Simple Array Splitting / nth Output Question

[fivedots]

Trying to do something that I think should be very simple. Let's assume that I have an array populated with the numbers 1 to 24 for this example.

 

I need to output these items in 4 columns to accomodate my CSS layout but still have them read from left to right, top to bottom. I also want this to be somewhat dynamic - I'm okay hardcoding it to split into 4 columns, but need it to handle any number of items in the array.

 

I'm not sure if the best way to do this would be to split the original array into an array for each of the 4 columns, or to loop through the original array 4 times and output items 1+4, 2+4, and so on. Or maybe I should be using array_filter with some custom callback functions. I'm fine with any solution.

 

The end result is echoing the array in the following groupings so I can surround each column with the appropriate column HTML for layout (in this case the array actually contains IMG urls):

 

Column 1: 1, 5, 9, 13, 17, 21

Column 2: 2, 6, 10, 14, 18, 22

Column 3: 3, 7, 11, 15, 19, 23

Column 4: 4, 8, 12, 16, 20, 24

 

Any help would be appreciated! This one is driving me nuts and I know it should be relatively easier. Guess I should stick to HTML + CSS.

[Pikachu2000]

You want the output to be 4 columns wide and 8 (or however many it takes) rows high, right? Just loop through the array, and increment a counter as you go. Use the modulus operator to determine when to break the line, and whether an additional break needs to be echoed after the loop terminates.

 

$width = 4;
$array = range(1,26); // fill an array with values 1-26
$i = 1;
foreach( $array as $v ) {
echo "$v ";
echo $i % $width === 0 ? '<br>' : '';
$i++;
}
echo $width % 4 !== 0 ? '<br>' : '';

[fivedots]

That I can do, the issue is that I need to output each complete column at a time instead of outputting R1C1, R1C2, etc. Need R1C1, R2C1, etc. while maintaining the appearance of having done it the way you explained, i.e.  in the same/original order.

 

The reason being I'm outputting thumbnails of various heights and want the column contents to stack properly without the row taking the height of the tallest item. Does that explain it a bit better?

[Pikachu2000]

Does that explain it a bit better?

 

Not really, no. Maybe you could provide some sample data, and the expected output?

[fivedots]

Okay, let's simplify to considering an array whose desired output is a 2x2 grid. Say the array contains: Apples, Oranges, Plums, Pears.

 

Using the proposed solution, we'd output:

 

Apples, Oranges
Plums, Pears

 

What I need to output is:

 

Apples, Plums
Oranges, Pears

 

Which I will arrange into columns using something like:

 

<div class="column">
  Apples
  Plums
</div>
<div class="column">
  Oranges
  Pears
</div>

 

So I want to output the data by column rather than by row. Unfortunately can't think of how else to explain it at the moment.

[Cheeseslice]

Hey,  this is my first post so be gentle. 

 

I have actually just decided to start learning PHP today and this seemed to be the forum where everyone hangs out, I saw your post and thought it would be something that I would probably use quite often.  This code can probably be reduced to a couple of lines (I was using the php manual) but you can achieve what you want by running 4 loops.  Would anyone be kind enough to point me in the right direction for newbie tutorials.  Many thanks.

 

<?php
$array = range(1,26); // fill an array with values 1-26
$i = 1;

$max=count($array);
echo $max;

$i=0;

echo "<div class=\"c1\">";
while($i<=$max){
echo $array[$i] . " ";
$i+=4;
}
echo "</div>";

$i=1;

echo "<div class=\"c2\">";
while($i<=$max){
echo $array[$i] . " ";
$i+=4;
}
echo "</div>";

$i=2;

echo "<div class=\"c3\">";
while($i<=$max){
echo $array[$i] . " ";
$i+=4;
}
echo "</div>";

$i=3;

echo "<div class=\"c4\">";
while($i<=$max){
echo $array[$i] . " ";
$i+=4;
}
echo "</div>";
?>

[Cheeseslice]

As a matter of interest.  Is it more efficient to run one loop?

 

<?php
$array = range(1,26); // fill an array with values 1-26
$max=count($array);

$i=0;
while($i<=$max){
$c1html .= $array[$i] . " ";
$i++;
$c2html .= $array[$i] . " ";
$i++;
$c3html .= $array[$i] . " ";
$i++;
$c4html .= $array[$i] . " ";
$i++;
}
?>

<div class="c1"><?php echo $c1html;?></div>
<div class="c2"><?php echo $c2html;?></div>
<div class="c3"><?php echo $c3html;?></div>
<div class="c4"><?php echo $c4html;?></div>

[fivedots]

Thanks for the reply! I ended up taking a simpler route and disregarding my desire for the array to still be represented from left to right. Since I'm dealing with images, I have a little bit of leeway. Ended up just doing this, which is working so far:

 

<?php 

// populate array with numbers 1 to 27 (odd to test new column logic
$total = range(1,27);

// divide the total number of items in the array by the desired number of columns
$per_column = count($total) / 4;

// open up the initial row + columns
echo '<div class="row">';
echo '<div class="span3">';

$i = 0;

foreach ($total as $value) {

	$i++;

	echo '<img src="http://placehold.it/300x400">';

	// check to see if we're at the total of items needed for this column and move to next column if so		
	if ($i >= $per_column) {
		$i = 0;
		echo '</div>';
		echo '<div class="span3">';
	}

}

// close the final column and row
echo '</div>';
echo '</div>';

?>