创建一个没有Javascript的负责任的交错行设计

Question

我正在尝试为某些内容块设计交错布局，其中每个块的宽度完全相同，但可能具有不同的高度。但是，每个项目都是连续的，因此它们需要从左到右或多或少清晰易读（即：

第 1 列有第 1 项和第 4 项，第 2 列有第 2 项和第 5 项，第 3 列有第 3 项）

这是我的想法：http://oi59.tinypic.com/24b66hw.jpg

这是我的第一个想法：

<?php
    $arr = array();
    $arr[] = array('title' => 'Day 1', 'img' => '/image1.png', 'text' => 'Text for item 1');
    $arr[] = array('title' => 'Day 2', 'img' => '/image2.png', 'text' => 'Text for item 2');
    $arr[] = array('title' => 'Day 3', 'img' => '/image3.png', 'text' => 'Text for item 3');
    $arr[] = array('title' => 'Day 4', 'img' => '/image4.png', 'text' => 'Text for item 4');
    $arr[] = array('title' => 'Day 5', 'img' => '/image5.png', 'text' => 'Text for item 5');
    $cols = array();
    $cols[0] = array();
    $cols[1] = array();
    $cols[2] = array();
    for($x = 0; $x <= count($arr); $x+=3) {
        $cols[0][] = $arr[$x];
        if (isset($arr[$x+1])) {
            $cols[1][] = $arr[$x+1];
        }
        if (isset($arr[$x+2])) {
            $cols[2][] = $arr[$x+2];
        }
    }
    foreach($cols as $key => $col) {
        echo '<div class="col'.$key.'">';
        foreach($col as $item) {
            echo '<div class="row-item">';
            echo 'Title: '.$item['title'].'<br />';
            echo 'Image: '.$item['img'].'<br />';
            echo 'Text: '.$item['text'];
            echo '</div>';
        }
        echo '</div>';
    }
?>

这将产生这个：

<div class="col0">
    <div class="row-item">
        Title: Day 1<br>
        Image: /image1.png<br>
        Text: Text for item 1
    </div>

    <div class="row-item">
        Title: Day 4<br>
        Image: /image4.png<br>
        Text: Text for item 4
    </div>
</div>

<div class="col1">
    <div class="row-item">
        Title: Day 2<br>
        Image: /image2.png<br>
        Text: Text for item 2
    </div>

    <div class="row-item">
        Title: Day 5<br>
        Image: /image5.png<br>
        Text: Text for item 5
    </div>
</div>

<div class="col2">
    <div class="row-item">
        Title: Day 3<br>
        Image: /image3.png<br>
        Text: Text for item 3
    </div>
</div>

不幸的是，当我被告知布局必须具有响应性时，我遇到了一个问题，并且在较小的屏幕上显示时，只有一行而不是三行，如下所示：http://oi62.tinypic.com/2hfudj6.jpg

除了使用 JavaScript 在小屏幕上重新组织块，或者单独输出仅在小屏幕上出现的块之外，我似乎想不出任何解决这个特定问题的方法。

Answer 1

啊，我会给你指出HTML5 CSS3 columns的方向。Chris Coyier在这里写了一篇很好的文章，在这里写了一个CodePen。

这是一个简单的 CSS 修复。您可以在@media查询中更改它们。如果我没记错的话，Pinterest使用了这个，以及一个针对不支持浏览器的Javascript回退。

现在这意味着您的内容将从上到下然后从左到右（按源顺序）流动，因此：

1 | 5 | 9
2 | 6 | 10
3 | 7 | 11
4 | 8 | 12

。就像报纸专栏一样。

Answer 2

PHP 可能是不必要的，因为单独的 CSS 伪类应该做一个更干净（而且不那么详尽）的工作。

第一个示例允许您定位div 元素的每个奇数和偶数实例.col：

 .col:nth-child(odd) {
            /* Your Styles */
  }
 .col:nth-child(even) {
            /* Your Styles */
  }

或者对于更具体的控件，这将允许您按出现顺序定位元素：

 .col:nth-child(1) {
            /* Your Styles */
  }
 .col:nth-child(2) {
            /* Your Styles */
  }
 .col:nth-child(3) {
            /* Your Styles */
  }

当然，现在，这将帮助您为桌面环境设置列。移动或其他视口呢？媒体查询。

  @media screen and (max-width: 1024px) {
        .col:nth-child(1) {
              /* Your Styles */
          }
   }

这将允许您在较小的视口上定义各个列的行为。根据需要尽可能多地复制媒体查询，以精确确定它们在所有屏幕尺寸上的行为方式。