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

Question

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

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

所以有四列和二十个post，最新的post在顶部，最旧的在底部。

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

根据要求，我的代码：

$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

你要找的是Masonrycss，只需要html和css就可以了。

#CSS:
.masonry { /* Masonry container */
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}


#HTML:   
<div class="masonry">
   <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
   <div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div>
   <div class="item">Incidunt sit unde minima in nostrum?</div>
   <div class="item">Ducimus, voluptates, modi, delectus animi maiores consequuntur repellat quisquam fugiat eum possimus enim culpa totam praesentium magni quae!</div>
</div>

Answer 2

您可以将帖子分成 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.

Answer 3

好的，感谢@Chorna，我设法分叉了他的答案并解决了我的问题！谢谢你:).

我以这种方式将帖子加载到数组中：

    switch($post_counter) {
    case 0:
    case 4:
    case 8:
    case 12:
    case 16:                            
        $col = 1;
        break;
    case 1:
    case 5:
    case 9:
    case 13:
    case 17:
        $col = 2;
        break;
    case 2:
    case 6:
    case 10:
    case 14:
    case 18:
        $col = 3;
        break;
    case 3:
    case 7:
    case 11:
    case 15:
    case 19:
        $col = 4;
        break;
}
$post_list[$col][] = get_the_ID();
$post_counter++;

然后我这样显示它们：

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

谢谢大家的帮助！

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

Irregular rows but regular columns with Twitter-Bootstrap 3

html

css

php

twitter-bootstrap-3