Question

I am trying to adapt the WordPress loop to style posts differently in rows that get
infinitely smaller until all posts are displayed

The concept here is to display posts in rows

first row 1 post
second row 2 posts
third row 3 posts
fourth row 4 posts
fifth row 5 posts
sixth row 6 posts
seventh row 7 posts

and onward until all posts have been retrieved

the below code is limited and does not do the above how would you adapt to make the below do the above?

the below code is functional and can be seen here: http://ccs.btcny.net/redhook/

<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count == 1) : ?>
<div class="style-1"><?php the_content(); ?></div>
<?php elseif ($count == 2 || $count == 3) : ?>
<div class="style-2"><?php the_content(); ?></div>
<?php elseif ($count == 4 || $count == 5 || $count == 6) : ?>
<div class="style-3"><?php the_content(); ?></div>
<?php elseif ($count == 7 || $count == 8 || $count == 9 || $count == 10) : ?>
<div class="style-4"><?php the_content(); ?></div>
<?php elseif ($count == 11 || $count == 12 || $count == 13 || $count == 14 || $count == 15 ) : ?>
<div class="style-5"><?php the_content(); ?></div>
<?php elseif ($count >= 16 ) : ?>
<div class="style-6"><?php the_content(); ?></div>
<?php endif; ?>
<?php endwhile; ?>

Answer 1

Here is my solution. Basically I am setting the row number by checking if the next element is inside the current row. To do that I need to see if next index is equal to the first index of the next row.

The tricky part is to find the index of the first item in the row. As this is not linear but geometrical order the items number in each row will be increasing. To calculate the first item of the next row I need to add the number of elements in the current row (in this case simply the current row) to the first index of the current row. When I get the first index of the next row and when the next item will be equal to that number I need to go to the next row and set the first index for the current row for that calculated index.

<?php //The first index of the first row is 1?>
<?php $row = 1;?>
<?php $curFirstIndex = 1;?>

<?php //start counting items ?>
<?php $count = 0;?>
<?php while (have_posts()) : the_post();?>

   <?php //create actual html code ?>
   <div class="style-<?php echo $row;?>"><?php the_content(); ?></div>

   <?php //check if the next item is equal to the first index of the next row ?>
   <?php if ($count+1 >= ($row + $curFirstIndex)) :
       <?php 
         //the next item will be in the new row
         //in $curFirstIndex store the first number of the current row
         $curFirstIndex = $row + $curFirstIndex;

         //go to the next row
         $row++;
       ?>
   <?php endif; ?>
   <?php $count++;?>

<?php endwhile;?>

[EDIT]

The above solution works but it has one little flaw, namely it incorporates the logic into the template. WordPress does not follow some strict layer separation but in my opinion it is always good to try to do that if it is possible. So I come up with two ways that can reduce the logic of this in the template file and move the logic outside. Since wordpress has functions.php in its theme we can use this file to create a function which will handle that logic. Here is the code

Template view file:

<?php //Initial values?>
<?php $row = 1;?>
<?php $count = 1;?>
<?php while (have_posts()) : the_post();?>

   <?php //create actual html code ?>
   <div class="style-<?php echo $row;?>"><?php the_content(); ?></div>

   <?php //check if the current item is the last in the row ?>
   <?php if ($count == getRowLastItemIndex($row)) {$row++;} ?>
   <?php $count++;?>

<?php endwhile;?>

in functions.php:

function getRowLastItemIndex($row) {
    $index = 0;
    for($i = 1; $i <= $row; $i++) {
        $index += $i;
    }
    return $index;
}

Or make it even more separate in the following way

The template file

<?php //Initial values?>
<?php $row = 1;?>
<?php $count = 1;?>
<?php while (have_posts()) : the_post();?>

   <?php //create actual html code ?>
   <div class="style-<?php echo $row;?>"><?php the_content(); ?></div>

   <?php $row = getRowNumber($row,$count);?>
   <?php $count++;?>

<?php endwhile;?>

And add another function to the functions.php

function getRowNumber($row,$count) {

    if ($count == getRowLastItemIndex($row)) 
        $row++;
    } 
    return $row;
}