javascript - 使用 Bootstrap 和 ACF Repeater 安排替代高度 div

Question

我正在尝试排列 div，如下图所示:

到目前为止，我一直在尝试通过根据变量和计数器输出 pull-left pull-right 来实现此目的，如下所示:

<?php if( have_rows('spotlights') ): ?>

    <?php $spotcount = 0;
          $rowcount = 0;
          $floatclass = 'pull-left';
    ?>

    <?php while( have_rows('spotlights') ): the_row(); 

        $image = get_sub_field('image');?>

            <div class="col-md-6 col-sm-12">

                <img class="<?php echo $floatclass; ?>" src="<?php echo $image; ?>" />

            </div>

            <?php
                if($spotcount == 2) {
                    echo '<div class="clearfix"></div>';
                    $spotcount = 0;
                    ++$rowcount;

                } else {
                    ++$spotcount;
                }

                if ($rowcount % 2 == 0) {
                    $floatclass = 'pull-left';
                } else {
                    $floatclass = 'pull-right';
                }
            ?>

    <?php endwhile; ?>
<?php endif; ?>

尽管这根本不起作用...我无法让 4/5 出现在 5 之前。5 始终覆盖所有内容并向左拉。

我尝试过砖石，但这不是我想要的。这些 div 将保持在这个固定高度，这有助于解决问题。

Answer 1

这是我使用计数器的解决方案...

<?php if( have_rows('spotlights') ): ?>

<?php $spotcount = 0;
      $rowcount = 0;
      $oddImage = 0;
?>

<?php while( have_rows('spotlights') ): the_row(); 

    $image = get_sub_field('image');

            if ($rowcount % 2 == 0) {

                echo '<div class="col-md-6 col-sm-12"><img class="spotlight" src="' $image '" /></div>';

            } else {

                if ($oddImage <= 1) {

                    if($oddImage == 0) {

                        echo '<div class="col-md-6 col-sm-12">';
                        echo '<img class="spotlight" src="';
                        echo $image;
                        echo '" />';
                        ++$oddImage;

                    } else {

                        echo '<img class="spotlight" src="';
                        echo $image;
                        echo '" /></div>';
                        ++$oddImage;
                    }

                } else {

                    echo '<div class="col-md-6 col-sm-12 text"><img class="spotlight" src="';
                    echo $image;
                    echo '" /></div>';
                    $oddImage = 0;
                }
            }

            if($spotcount == 2) {

                echo '<div class="clearfix"></div>';
                $spotcount = 0;
                ++$rowcount;

            } else {
                ++$spotcount;   
            }

            ?>

<?php endwhile; ?>