php - Twitter-Bootstrap 3 行不规则但列规则

Question

我正在尝试实现一种布局，其中有 4 列，其中内容位于能够垂直堆叠的框中。这意味着没有规则的行(每个内容框的高度可以不同)，只有规则的列(内容框的宽度始终相同)。

问题是 - 我不知道如何通过 PHP 循环来完成它。那是因为我必须将第一篇文章放入第一列，第二篇文章放入第二列，第三篇文章放入第 3 列，第四篇文章放入第 4 列，然后第 5 篇文章再次进入第 1 列，等等。

所以有四列和二十篇帖子，最新的帖子在顶部，最旧的帖子在底部。

这是我已有的屏幕截图，您可以看到不规则行和规则列的概念:

按照要求，我的代码:

$counter = 0;
for($cols = 0; $cols < 4; $cols++) {
?>

<!-- COLUMN NR <?php echo $cols; ?> -->
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 post_box">             
<?php
foreach ($post_list as $p) {
    $the_post = get_post($p);
    $the_title = $the_post->post_title;
    $the_content = $the_post->post_content;

    if($counter == (0 + $cols) || $counter == (4 + $cols) || $counter == (8 + $cols) || $counter == (12 + $cols) || $counter == (16 + $cols) ) {
    ?>
    <!-- POST NR <?php echo $counter; ?> WITH ID <?php echo $p; ?> -->
    <div class="post_container">
    <a href="<?php echo get_permalink($the_post->ID); ?>">
        <div class="row postbox_title">
            <div class="col-xs-12 title_col">
            <h2><?php echo $the_title; ?></h2>
            </div>
        </div>
        <div class="row postbox_content">
            <div class="col-xs-12 content_col">
                <div class="post_content">
                    <?php echo '<p>'.$the_content.'</p>'; ?>
                </div>
            </div>
        </div>
    </a>                        
    </div>
    <?php
    }           
    $counter++;
}
?>
</div>
<?php
}

这是我的代码的屏幕截图，以使其更具可读性: http://scr.hu/5z5a/icinl

Answer 1

您可以将帖子分成 4 个数组，然后使用 foreach 创建列。类似于(伪代码):

// one foreach to divide posts
$col = 1;
foreach($posts as $post) {
    $cols[$col][] = $post;
    $col = $col == 4 ? 1 : $col+1;
}
// then, another foreach for the html
foreach($cols as $col) {
    // open col div
    foreach($col as $post) {
        // print post
    }
    // close col div
}

可以看到代码输出here .