Question

我想创建一个由五列组成的动态布局。在每一列中，项目应从左开始，从右结束，在垂直方向上均匀放置。例如，如果总共有8个项目，那么前三列将有2个项目，而后两列将有1个项目。

赞：

 _______ _______ _______ _______ _______                       _______
|#######|#######|#######|#######|#######|                     |       |
|#  1  #|#  3  #|#  5  #|#  7  #|#  8  #|                     |       |
|#######|#######|#######|#######|#######|                     |       |
|#######|#######|#######|       |       |                     |       |
|#  2  #|#  4  #|#  6  #|       |       |   #######           |       |
|#######|#######|#######|       |       |   #  x  # == item   |       | == column
|_______|_______|_______|_______|_______|   #######           |_______|

我遇到的问题不是与CSS布局有关，而是与循环的实际创建有关。通过将项目数量除以列数量，我设法计算出每列中必须放置多少个项目。

到目前为止，这是循环：

<?php
...
// The Loop
if ($cards->have_posts()) {

    $length           = $cards->post_count;
    $column_amount    = 5;
    $items_per_column = $length / $column_amount;
    $items_per_column = round($items_per_column);
    $counter          = 0;

    if ($items_per_column < 1) {
        $items_per_column = 1;
    }

        echo '<div class="grid columns equal-height border-bottom">';

        while ($cards->have_posts()) {
            $cards->the_post();

            if ($counter % $items_per_column == 0) {
                echo $counter > 0 ? "</div>" : ""; // close div if it's not the first
                echo '<div class="grid__col grid__col--1-of-5 border-left no-padding">';
            }

            get_template_part("modules/column-item"); 

            if ($counter == $length) {
                echo '</div>'; 
            }

            $counter++;

        }
        echo '</div>';

    }

// Restore original Post Data
wp_reset_postdata();
?>

但这是行不通的，因为它没有按查询顺序在div中一个接一个地放置项目，而是试图强制每一列都包含两个项目。最终破坏了整个事情。

有人知道实现这一目标的任何巧妙方法吗？

Answer 1

提前计算项目数。然后，当到达$count - 1时，请确保和$count拥有自己的列。我下面的想法可能会有所优化，但这只是在展示基本想法，并未提供完整的解决方案。如果您不了解我的意思，请发表评论。

$columnCount = count($cards);
$i = 1;

while ($cards->have_posts()) {
            $cards->the_post();

            if($i == $columnCount || $i == ($columnCount - 1)){
              //create single item column
             }
            else ($counter % $items_per_column == 0) {
                echo $counter > 0 ? "</div>" : ""; // close div if it's not the first
                echo '<div class="grid__col grid__col--1-of-5 border-left no-padding">';
            }

            get_template_part("modules/column-item"); 

            if ($counter == $length) {
                echo '</div>'; 
            }

            $counter++;
            $i++;

        }

Answer 2

我实际上遵循了用户Ryan Kozaks的建议，而是使用CSS解决了此问题。感觉，至少在这种情况下，这是不依赖PHP循环进行布局的最有效方法。

我改为使用一种非常标准的方式来遍历帖子，将其与类.columns__item一起添加到名为.columns的容器中。然后，我利用CSS中的columns属性进行了以下操作：

.columns {
    column-count: 5;
}

.column__item {
    -webkit-column-break-inside:avoid; 
    -moz-column-break-inside:avoid; 
    -o-column-break-inside:avoid; 
    -ms-column-break-inside:avoid; 
    column-break-inside:avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

通过在列项目上同时使用page-break-inside和break-inside，我会显得特别苛刻。这实际上是在防止.column__item分成几列。这样，.columns会根据有多少列项目获得自适应高度，并根据最高列设置其高度。我可能只需要column-break-inside，但是还不清楚两者之间的区别是什么，所以我同时使用了两者，并且似乎可行。

将div均匀地放置在五个垂直列中

2 个答案: