For循環中第一行的特殊列布局

Question

我有一個網頁，每行顯示4個圖像。

我想使第一行成爲與其他行不同的列配置的特殊行，如下圖所示。

所以這個特殊的排將有3列在一個更大尺寸的第一個。

下面是我現在有的和<li>代表一行，<figure>代表一列。

<ul> 
    <li> 
    <% Object.keys(data).forEach(function(key) { %> 

     <% if (key%4 == 0 && key != 0) { %> 
      </li><li> 
     <% } %> 
     <figure> 

      ... 

     </figure> 
    <% }) %> 
</ul> 

我不能讓我的頭周圍加上內環路這一條件。

Answer 1

最好寫在普通的js文件中，但無論如何，你能檢查一下嗎？

<% Object.keys(data).forEach(function(key) { %> 

    <% if (key === 0) { %> 
     <figure class="double-size"> 

      ... 

     </figure> 
    <% } else { %> 
     <% if ((key+1)%4 == 0 && key != 0) { %> 
      </li><li> 
     <% } %> 

     <figure> 

      ... 

     </figure> 
    <% } %> 

<% }) %>