Как создать новую строку в загрузчике с 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> 

Но это создает новую строку для каждого изображения. Я знаю, что я не должен так поступать. То, что я хочу достичь, - показать 3 изображения в каждом row и затем перейти к следующему row с другим 3 <div class="col-md-4 myimg"> для следующих 3 изображений. Или только 2 из этих DIVs, если есть только 2 изображения. Могут быть 20 изображений, поэтому мне понадобятся 7 rows, 6 с 3 из этих DIV и последние с 1.

Как я могу это достичь?

Большое спасибо.

Answer 1

Я знаю, что вы запросили решение подчёркивания, но я бы использовал lodash's 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 ширины (принимая сточную канавку и расстояние между ними)
• Элемент div/html, который имеет отображение: block; wil автоматически запускается на новой строке. (Используйте для этого встроенный блок или поплавки). Вы заметите, что загрузочный лоток полностью плавает.

Принимая вышеуказанное, я предлагаю следующий код, в котором контейнером должен быть поле, в котором находятся все изображения. добавьте в 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 на третьем и т. Д.) U может работать с conditons там: if (число% 3 === 0) {end row + new row}. Открывайте и закрывайте строку до и после цикла. % называется модулем и дает остаток/смещение. Таким образом, только действительное умножение 3 вернет 0 (3, 6, 9 и т. Д.). Небольшое примечание: 0% 3 = 0