如何使用wordpress中的填充bootstrap网格结构来处理循环?

i make a code that can fill bootstrap grid structure i used while and for loop in my code but the issue is for loop repeat its value in 2nd row

Grid structure

the above picture tells you column 2 and 3 of first row and column 1 and 2 of second row has same value here is my code

            <div class="row">
                <div class="col-xs-12">
                    <div class="rst-mediagrid">
                                                <?php 

                                                    global $post;

                                                    $loop = new WP_Query( array( 'posts_per_page' => 9,'orderby'=>rand) );

                                                    $posts = array();

                                                     while ( $loop->have_posts() ) : 

                                                        $items = array();

                                                        $items['link']=wp_get_attachment_url( get_post_thumbnail_id( $post->ID ));
                                                        $items['Image'] = get_the_post_thumbnail($loop->the_post());
                                                        $items['LinkPost']=get_permalink($post->ID);
                                                        $items['Title']=get_the_title($post->ID);
                                                        $items['PostTime']=get_the_time('M d,Y', $post->ID);


                                                        array_push($posts, $items);


                                                     endwhile;

                                                    for($i = 1; $i< count($posts); $i++){


                                                ?>
                                                    <?php
                                                    if($i==1){
                                                    ?>
                        <div class="div">
                            <div class="rst-col rst-col-50">
                                <div class="rst-postpic">
                                                                        <a href="<?php echo $posts[$i]['LinkPost']; ?>"><img src="<?php echo $posts[$i+1]['link']; ?>" alt="" style="height: 385px;width: 770px"/></a>
                                                                        <?php echo $i+1; ?>
                                </div>
                                <div class="rst-postinfo">
                                    <a href="#"><span>Sport</span></a>
                                    <h6><a href="<?php echo $posts[$i]['LinkPost']; ?>"><?php echo $posts[$i]['Title']; ?></a></h6>
                                    <time><i class="fa fa-clock-o"></i><?php echo $posts[$i]['PostTime']; ?></time>
                                </div>
                            </div>
                                                        <?php //endif; ?>

                            <div class="rst-col rst-col-25">
                                <div class="rst-postpic rst-postvideo">

                                    <a href="<?php echo $posts[$i+1]['LinkPost']; ?>"><img src="<?php echo $posts[$i+2]['link']; ?>" alt="" style="height: 385px;width: 770px"/></a>
                                                                            <?php echo $i+2; ?>
                                </div>
                                <div class="rst-postinfo">
                                    <a href="#"><span>Sport</span></a>
                                    <h6><a href="<?php echo $posts[$i+1]['LinkPost']; ?>"><?php echo $posts[$i+1]['Title']; ?></a></h6>
                                    <time><i class="fa fa-clock-o"></i><?php echo $posts[$i+1]['PostTime']; ?></time>
                                </div>
                            </div>

                            <div class="rst-col rst-col-25">
                                <div class="rst-postpic">
                                    <a href="<?php echo $posts[$i+2]['LinkPost']; ?>"><img src="<?php echo $posts[$i+3]['link']; ?>" alt="" style="height: 385px;width: 770px"/></a>
                                                                            <?php echo $i+3; ?>
                                </div>
                                <div class="rst-postinfo">
                                    <a href="#"><span>Sport</span></a>
                                    <h6><a href="<?php echo $posts[$i+2]['LinkPost']; ?>"><?php echo $posts[$i+2]['Title']; ?></a></h6>
                                    <time><i class="fa fa-clock-o"></i><?php echo $posts[$i+2]['PostTime']; ?></time>
                                </div>
                            </div>

                            <div class="clear"></div>
                        </div><!-- end first row-->
                                                    <?php } //end if ?>
                                                <?php
                                                if($i == 2 ){
                                                ?>
                        <div class="div">
                            <div class="rst-col rst-col-25">
                                <div class="rst-postpic">
                                    <a href="<?php echo $posts[$i]['LinkPost']; ?>"><img src="<?php echo $posts[$i+1]['link']; ?>" alt="" style="height: 385px;width: 770px"/></a>
                                                                            <?php echo $i+1; ?>
                                </div>
                                <div class="rst-postinfo">
                                    <a href="#"><span>Sport</span></a>
                                    <h6><a href="<?php echo $posts[$i]['LinkPost']; ?>"><?php echo $posts[$i]['Title']; ?></a></h6>
                                    <time><i class="fa fa-clock-o"></i><?php echo $posts[$i]['PostTime']; ?></time>
                                </div>
                            </div>
                            <div class="rst-col rst-col-25">
                                <div class="rst-postpic rst-postvideo">
                                    <a href="<?php echo $posts[$i+1]['LinkPost']; ?>"><img src="<?php echo $posts[$i+2]['link']; ?>" alt="" style="height: 385px;width: 770px"/></a>
                                                                            <?php echo $i+2; ?>
                                </div>
                                <div class="rst-postinfo">
                                    <a href="#"><span>Sport</span></a>
                                    <h6><a href="<?php echo $posts[$i+1]['LinkPost']; ?>"><?php echo $posts[$i+1]['Title']; ?></a></h6>
                                    <time><i class="fa fa-clock-o"></i><?php echo $posts[$i+1]['PostTime']; ?></time>
                                </div>
                            </div>
                            <div class="rst-col rst-col-50">
                                <div class="rst-postpic">
                                    <a href="<?php echo $posts[$i+2]['LinkPost']; ?>"><img src="<?php echo $posts[$i+3]['link']; ?>" alt="" style="height: 385px;width: 770px"/></a>
                                                                            <?php echo $i+3; ?>

                                </div>
                                <div class="rst-postinfo">
                                    <a href="#"><span>Sport</span></a>
                                    <h6><a href="<?php echo $posts[$i+2]['LinkPost']; ?>"><?php echo $posts[$i+2]['Title']; ?></a></h6>
                                    <time><i class="fa fa-clock-o"></i><?php echo $posts[$i+2]['PostTime']; ?></time>
                                </div>
                            </div>
                            <div class="clear"></div>
                        </div><!--end second row-->
                                                     <?php
                                                }//end if

                                                }//end for loop ?>

                    </div>
                </div>
            </div>

the issue i was facing is that i upload 6 post and when i increase the value of loop like for($i=1;$ienter image description here

this loop give me unique value but last two columns has no images but when i upload two more post in wordpress and total number of posts = 8 in database then image appear tell me whats the issue in my looping

The code logic inside the loop is really confusing, here is what happening:

  1. First iteration ($i = 1)
    • Display second image ($posts[$i+1]['link']) with the link of the first post ($posts[$i]['LinkPost'];)
    • Display third image ($posts[$i+2]['link']) with the link of the second post ($posts[$i+1]['LinkPost'])
    • Display fourth image ($posts[$i+3]['link']) with the link of the third post ($posts[$i+2]['LinkPost'])
  2. Second iteration ($i = 2)
    • Display third image ($posts[$i+1]['link']) with the link of the second post ($posts[$i]['LinkPost'];)
    • Display fourth image ($posts[$i+2]['link']) with the link of the third post ($posts[$i+1]['LinkPost'])
    • Display fifth image ($posts[$i+3]['link']) with the link of the fourth post ($posts[$i+2]['LinkPost'])
  3. Every next iterations : do nothing

This is why you get two time image 3 and 4.