Javascript 使用引导和ACF中继器安排备用高度div

我正在尝试按下图所示安排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将保持在这个固定高度，这有助于解决问题。

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

<?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; ?>

---

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

<?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; ?>