javascript - 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>
    <% } %>

<% }) %>