PHP从WHILE循环显示3列块

Question

我正在尝试建立一个模仿新 www.digg.com 网站布局的网站（博客）。

它由一个顶部精选的全宽帖子组成，下面的帖子是 3 列宽的块。所有的blocka都设置为一定的宽度并向左浮动。

我正在构建的帖子的不同之处在于，不仅仅是顶部帖子是精选全宽帖子，任何行都可以显示精选帖子，它应该扩大页面的整个宽度并将其他块向下推。

问题是，如果一个帖子被指定为精选并且它不在左栏中，那么它看起来就不正确。下图说明了如果精选帖子位于第 2 列或第 3 列时会发生什么。

遍历 Wordpress 帖子的 WHILE 循环，我计算并为每个帖子 CSS 类分配一个 1 到 3 之间的数字。例如<div class="col-1"><div class="col-2"><div class="col-3">

col-1 = 左栏帖子
col-2 = 中间柱子
col-3 = 右栏帖子

有时，帖子还会有一个名为 featured 的 CSS 类。当帖子被指定为featured 时，它将扩展为 3 列而不是仅 1 列的全宽。

只要featured 帖子是结果集中的第一个帖子，这一切都很容易做到。但是，在下图中，我显示了我的问题所在。如果我为每个帖子分配一个 1-3 的类列名，并为特色帖子分配一个类名，然后假设我正在迭代集合并将 featured CSS 类分配给通常具有类名的帖子col-2 或 col-3 有问题。

下图显示了问题。在第 3 行，您可以看到如果我将特色类分配给第 3 行的中心列 (col-2) 会发生什么

我需要以某种方式将类名 col-1 col-2 col-3 或 featured 分配给 while 循环中的所有帖子，并确保 featured 帖子始终位于第 1 列位置。

我愿意接受有关如何实现这一目标的任何建议或帮助？

下面是 PHP 循环的示例代码...（注意：我还没有添加代码来检查精选帖子）

<?php
// Start our column count at 1
$column = 1;
while (have_posts()) : the_post();
    $col_class = 'post-col-' .$column;
?>

  <article <?php post_class($col_class); ?>>
      post content
  </article>

<?php
// Increase the Column count
$column++;
// After count has displayed 3, we reset the count
if($column == 4){
    $column = 1;
}
endwhile;
?>

Answer 1

只是认为您也可以“保留”一个元素，直到整行都被填满。如果你的帖子是这样排序的：

1. 列表项
2. 列表项
3. 列表项
4. 列表项
5. 功能列表项
6. 列表项
7. 列表项

您可以像以前一样遍历它们，并在检测到特色项目时将其临时存储并在完成后显示。如下所示：

<?php
$column = 1;
$featured_list = array();
while (have_posts()) : the_post();
  $col_class = 'post-col-' .$column;

  if(!$isfeatured) {
    echo '<article '.post_class($col_class).'>post content</article>';
  } else {
    $featured_list[] = '<article '.post_class($col_class).'>post content</article>';
  }

  // Increase the Column count
  $column++;
  // After count has displayed 3, we reset the count
  if($column == 4){
    $column = 1;
  // Print everything in the array, doing nothing if empty
  foreach ($featured_list as $featured_item) { 
    echo $featured_item;
  }
  // Reset the array
  $featured_list = array(); 
}
endwhile;
?>