CSS3列垂直跨越

Question

I'm making a basic columns layout for photos with CSS3 Columns,

the problem is that in this way, it will first align content vertically and and then go to next column

for example consider this: http://jsfiddle.net/LQEfK/1/

here as you can see first second and third img are in first column. I found -webkit-column-axis which is not much documented and is suported only by Chrome.

<div class="image-gallery main">
    <?php while ( bp_has_images() ) : bp_the_image(); ?>
        <div class="image-thumb-box">
            <img alt="<?php bp_gallplus_image_id() ?>" src="<?php bp_image_mid_url() ?>" alt="">
        </div>
    <?php endwhile; ?>
</div>

Now I want to remake this php to align with this CSS. Like save make 3 variables in while loop and each should contain a column which will be right for css columns

Answer 1

Here is what I've done;

<div class="image-gallery main">
    <?php
        $key = 1;
        $column_one = '';
        $column_two = '';
        $column_three = '';
    ?>
    <?php while ( bp_gallplus_has_images() ) : bp_gallplus_the_image(); ?>
        <?php

            if($key == 1) {
                $column_one .= '<img data-postid="'. bp_gallplus_get_image_id() .'" data-org="'. bp_gallplus_get_image_url() .'" class="media-popover" data-pop="popover" src="'. bp_gallplus_get_image_mid_url() .'" alt="">';
                $key++;
            } else if ($key == 2) {
                $column_two .= '<img data-postid="'. bp_gallplus_get_image_id() .'" data-org="'. bp_gallplus_get_image_url() .'" class="media-popover" data-pop="popover" src="'. bp_gallplus_get_image_mid_url() .'" alt="">';
                $key++;

            } else {
                $column_three .= '<img data-postid="'. bp_gallplus_get_image_id() .'" data-org="'. bp_gallplus_get_image_url() .'" class="media-popover" data-pop="popover" src="'. bp_gallplus_get_image_mid_url() .'" alt="">';
                $key = 1;
            }
        ?>
    <?php endwhile; ?>
    <?php echo $column_one . $column_two . $column_three; ?>
</div>