如何使用 UnderscoreJs 在引导程序中创建新行

Question

我正在使用 UnderscoreJs，我现在的代码是：

<script type="text/template" id="image-template">
<% _.each(images, function(image){%>
<div class="row">
    <div class="col-md-4 myimg">    
        <img src="<%=image.imgsrc%>" class="img-thumbnail"/>
    </div>
</div>
<% }); %>

</script>

但这会为每张图片创建一个新行。我知道我不应该这样做。我想要实现的是在每个 row 中显示 3 张图像，然后转到下一个 row 以及另外 3 张 <div class="col-md-4 myimg"> 用于接下来的 3 张图像。或者如果只有 2 个以上图像，则只有 2 个 DIV。可能有 20 张图片，所以我需要 7 张rows，其中 6 张带有 3 个 DIV，最后一张只有 1 张。

我怎样才能做到这一点？

非常感谢。

Answer 1

我知道您要求使用下划线解决方案，但我会使用 lodash 的 chunk。如果您愿意，可以按照in this answer 的说明创建自己的块函数。

<script type="text/template" id="image-template">
<% _.each(_.chunk(images, 3), function(chunk){%>
  <div class="row">
  <% _.each(chunk, function(image){%>
    <div class="col-md-4 myimg">    
      <img src="<%=image.imgsrc%>" class="img-thumbnail"/>
    </div>
  <% }); %>
  </div>
<% }); %>
</script>

Answer 2

如评论，并且：

• 行用于将容器内的元素组合在一起。行这个词有点愚蠢，因为它不强制行。这真的是关于分组
• Bootstrap 将自动填充“行”（或容器/父元素），直到超过 12 个列，其中每个列使用 1/12 的宽度（使用装订线和间距）
• 具有 display:block 的 div/html 元素；将自动从新行开始。 （为此使用 inline-block 或 floats）你会注意到 bootstrap 是完全浮动的

根据上述情况，我建议使用以下代码，其中容器应该是所有图像所在的框。我想添加 col-xs-12 以确保移动可见性（每个“行”1 个）。

请使用以下 CSS 选择器来定位您的图片

.myImgs > div { // All direct descendants of myImgs }

.myImgs img { // All images within myImgs } 
or 
.myImgs > div > img { // Extremely specific }

-

<script type="text/template" id="image-template">

<div class="container myImgs">
    <% _.each(images, function(image){%>
    <div class="col-xs-12 col-md-4">    
        <img src="<%=image.imgsrc%>" class="img-thumbnail"/>
    </div>
    <% }); %>
</div>
</script>

如果您确实需要该行，请尝试在循环中获取一个计数器。 （第一次通过 1，第二次通过 2，第三次通过 3，等等）你可以在那里使用条件：如果（number%3 === 0）{end row + new row}。在循环之前和之后打开和关闭行。 % 称为模数，并给出余数/偏移量。因此，只有 3 的有效乘法才会返回 0（3、6、9 等）。小注：0%3 = 0