創建一個沒有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> 

，我遇到了一個問題，當我TOL d佈局必須具有響應性，並且在較小的屏幕上顯示時，只有一行而不是三個，如下所示：http://oi62.tinypic.com/2hfudj6.jpg

我似乎無法想出任何解決此特定問題的方法JavaScript在小屏幕上重新組織塊，或者單獨輸出只出現在小屏幕上的塊。

Answer 1

啊，我會指出你的方向HTML5 CSS3 columns。克里斯Coyier做a nice writeup here，和CodePen here。

這是一個簡單的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 */ 
      } 
    } 

這將允許您定義單個列在較小視口上的行爲。根據需要儘可能多地複製媒體查詢，以準確地確定它們應該如何在所有屏幕尺寸上表現出來。