Loop 3 posts column wise and continue the loop into same columns

2 views
0

I wanted some information about on how to achieve the below senario. Can anyone help me out please.

Ok so here is what i have got so far.

I have two custom post types. And i am pulling & merging those to load randomly. They load randomly and with post types alternatively.

Ex: post type 1, post type 2, post type 1, post type 2 etc..

I have achieved this so far. Now while loading posts i want them into 3 columns(masonry format).

<div class="row">
            <div id="grid-content">
            <?php
            // Fetch quotes
            $quotes_query = new WP_Query( array(
                'post_type'=> 'quote',
                'orderby' => 'rand',
                'posts_per_page' => 4,
            ) );

            // Fetch founders
            $founders_query = new WP_Query( array(
                'post_type'=> 'founder',
                'orderby' => 'rand',
                'posts_per_page' => 3,
            ) );

            // List of merged founder and quotes
            $mergedposts = array();

            for ( $i = 0; $i < 10; $i++ ) {
                // Add quotes to list
                if ( isset( $quotes_query->posts[ $i ] ) ) {
                    $mergedposts[] = $quotes_query->posts[ $i ];
                }

                // Add founder to list
                if ( isset( $founders_query->posts[ $i ] ) ) {
                    $mergedposts[] = $founders_query->posts[ $i ];
                }
            }

            foreach( $mergedposts as $post ) :
            setup_postdata($post);
            ?>
              <div class="col-md-4 col-sm-6 col-xs-12 foundersnetwork_col">
                <div class="foundersnetwork_list">                          
                    <?php if ( get_post_type( get_the_ID() ) == 'quote' ) { ?>
                      <div class="foundersnetwork_content" style="background-color: <?php the_field('background_color'); ?>;">
                          <h4><?php the_field('quote_data'); ?></h4>
                      </div>
                    <?php } ?>

                    <?php if(get_post_type( get_the_ID() ) == 'founder'){ ?>
                      <div class="foundersnetwork_img"><?php the_post_thumbnail('full'); ?></div>
                    <?php } ?>
                </div>
              </div>
          <?php endforeach; ?>
        </div>
        </div>

But the 4th post must fall into 1st column, 5th post into 2nd column, 6th post into 3rd column and so on..

example:

<div class="col1">
post 1
post 4
post 7
</div>
<div class="col2">
post 2
post 5
</div>
<div class="col3">
post 3
post 6
</div>

**** Updated ****

Found a solution. – https://bootsnipp.com/snippets/featured/pinterest-like-responsive-grid

So this is solved now. Thanks to everyone who spent time on this.