Every second post in different div block in WordPress - php

Question

Let's say I have 2 styles. Style 1 and Style 2
I would like to show every odd number post in the style 1 and even number posts in style 2
Below is my template file:
<?php /* Template Name: Home v2 */ get_header(); ?>
<main role="main">
<!-- section -->
<section>
<?php
$temp = $wp_query; $wp_query= null;
$wp_query = new WP_Query(); $wp_query->query('showposts=' . $theme_options['blog-post-per-page'] . '&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<div class="tiles-block w-clearfix">
<div class="float-left">
<div class="content-block w-clearfix">
<h5 class="black travel"><?php echo the_category();?></h5>
<h1 class="black mastheading"><?php the_title(); ?></h1>
<div class="date-block w-container">
<div class="black mini-date"> <?php echo get_the_date(); ?></div>
<img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/comment-icon.png' ?>">
<div class="black mini-date">32</div>
<img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/heart-icon.png' ?>">
<div class="black mini-date">14</div>
</div>
<div class="black iltalica"><?php the_excerpt(); ?></div>
<a class="a8 cta w-button" href="<?php the_permalink(); ?>">continue reading</a>
</div>
</div>
<div class="float-left natural-forest">
<div class="thumb">
<?php the_post_thumbnail('full'); ?>
</div>
</div>
<img class="right-arrow" src="<?php echo get_template_directory_uri() . '/images/right-arrow.png' ?>" />
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
The code above works good. but it gives only style 1.
I already have html setup for style 2 but don't know how to implement in the code above.
This is my style2 block
<div class="tiles-block w-clearfix">
<div class="float-right">
<div class="content-block w-clearfix">
<h5 class="black photography">PHOTOGRAPHY</h5>
<h1 class="black mastheading">title test</h1>
<div class="date-block w-container">
<div class="black mini-date">October 26, 2016</div>
<img class="mini-icon" src="http://aa.com/aa.png">
<div class="black mini-date">15</div>
<img class="mini-icon" src="http://bb.com/bb.png">
<div class="black mini-date">13</div>
</div>
<div class="black iltalica">Lorem Ipsuim dolor....</div>
<a class="a8 cta w-button" href="#">continue reading</a></div>
</div>
<div class="float-left window-light">
<div class="thumb">
<img src="<?php echo get_template_directory_uri() . '/images/post2.png' ?>" />
</div>
</div>
<img class="left-arrow" src="http://cc.com/cc.png">
</div>

Answer 1

This will get a little messy in PHP because you'd need several if statements. You might consider naming some of the inner divs the same, and making only the outer divs different names, and doing more of the work in CSS. That said, here's how you would do it:
Set a flag that changes each time through the loop, and check the value of the flag before you output your HTML.
$style_flag = 1;
while ($wp_query->have_posts()) : $wp_query->the_post();
//check the value
if ($style_flag == 1){
// output style 1
} else {
// output style 2
}
// do everything else you need to do in the loop
// switch the value of the flag
$style_flag = $style_flag * -1;
end while;
Back to CSS for a moment, though. Check out the nth-child selector if you're not familiar with it already: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Answer 2

I have found the solution to my problem.
<?php query_posts('showposts=0'); ?>
<?php
$i = 1;
?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php if(($i % 2) == 0) { ?>
<div class="tiles-block w-clearfix">
<div class="float-right">
<div class="content-block w-clearfix">
<h5 class="black photography"><?php echo the_category();?></h5>
<h1 class="black mastheading"><?php the_title(); ?></h1>
<div class="date-block w-container">
<div class="black mini-date"><?php echo get_the_date(); ?></div>
<img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/comment-icon.png' ?>">
<div class="black mini-date">32</div>
<img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/heart-icon.png' ?>">
<div class="black mini-date">14</div>
</div>
<div class="black iltalica"><?php the_excerpt(); ?></div>
<a class="a8 cta w-button" href="<?php the_permalink(); ?>">continue reading</a></div>
</div>
<div class="float-left window-light">
<div class="thumb">
<?php the_post_thumbnail('full'); ?>
</div>
</div>
<img class="left-arrow" src="<?php echo get_template_directory_uri() . '/images/left-arrow.png' ?>">
</div>
<?php } elseif (($i % 2) !== 0) { ?>
<div class="tiles-block w-clearfix">
<div class="float-left">
<div class="content-block w-clearfix">
<h5 class="black travel"><?php echo the_category();?></h5>
<h1 class="black mastheading"><?php the_title(); ?></h1>
<div class="date-block w-container">
<div class="black mini-date"><?php echo get_the_date(); ?></div>
<img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/comment-icon.png' ?>">
<div class="black mini-date">32</div>
<img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/heart-icon.png' ?>">
<div class="black mini-date">14</div>
</div>
<div class="black iltalica"><?php the_excerpt(); ?></div>
<a class="a8 cta w-button" href="<?php the_permalink(); ?>">continue reading</a>
</div>
</div>
<div class="float-left natural-forest">
<div class="thumb">
<?php the_post_thumbnail('full'); ?>
</div>
</div>
<img class="right-arrow" src="<?php echo get_template_directory_uri() . '/images/right-arrow.png' ?>" />
</div>
<?php } ?>
<?php $i++; ?>
<?php endwhile; ?>
<?php endif; ?>