Bootstrap Layout Coloumn

Question

У меня есть проблемы, чтобы построить макет с начальной загрузкой CSS,

<style> 
.item { 
    background-color: #fff; 
    -webkit-box-shadow: 0 0 5px 0 #e2e3e4; 
    -moz-box-shadow: 0 0 5px 0 #e2e3e4; 
    box-shadow: 0 0 5px 0 #e2e3e4; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    padding: 10px; 
} 

.item img{ 
    max-width: 100%; 
    min-width: 100%; 
    height: 100%; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
} 

#timeline { 
    margin: 15px 0; 
} 
</style> 
<div class="container-fluid"> 
    <div class="row"> 
     <?php 
      for ($i = 1; $i < 15; $i++) { 
       if ($i % 7 == 1 || $i == 1) { 
        echo '<div id="timeline" class="col-md-8">'; 
       } else { 
        echo '<div id="timeline" class="col-md-4">'; 
       } 
     ?> 
       <div class="item"> 
        <img class="lazy img-responsive" src="http://420placehold.it/art/300-300-<?php echo $i; ?>"> 
       </div> 
      </div> 
     <?php } ?> 
    </div> 
</div> 

Каждого кратные 7 я использую большие изображения, но у меня есть пустое пространство, как этот http://i57.tinypic.com/x35pg2.png

Кто-нибудь может помочь мне исправить это ?? Мне нужно сделать макет, как это с начальной загрузкой http://codepen.io/nouveau/pen/Litmp

CLOSE:

О, моя ошибка, извините все, что я заменить if ($i % 7 == 1 || $i == 1) на if ($i % 6 == 1) я исказил nth-child(12n+1),nth-child(12n+7) это отлично работает в настоящее время

Answer 1

Есть несколько вариантов, которые можно использовать для этого.

Прежде всего, необходимо использовать мозаичный скрипт, такой как http://desandro.github.io/masonry/, чтобы все было автоматически организовано.

Во-вторых, следует использовать порядок столбцов (http://getbootstrap.com/css/#grid-column-ordering) на 8-м, 9-м, 22-м и 23-м столбцах и т. Д. Таким образом, используя col-md-4 col-md-pull-8 и col-md-8 col-md -задвинуть-4. Это может усложниться, если вы представите другие размеры.