Как я могу сделать divs по вертикали?

Question

Как я могу сделать все div с разной высотой связки вертикально, имея их в столбцах? Каждый из divs на моем веб-сайте плавает слева с краем 5px справа и внизу, так что два столбца сделаны, но с ними все разные высоты нижние поля различаются в зависимости от самого высокого div в этой строке, как я могу сделать их связкой как на этой странице Google Now?

Я сделал базовую версию своего веб-сайта в JSFiddle.

<div id="container"> 
    <div id="tile" class="tile-1"></div> 
    <div id="tile" class="tile-2"></div> 
    <div id="tile" class="tile-3"></div> 
    <div id="tile" class="tile-4"></div> 
    <div id="tile" class="tile-5"></div> 
    <div id="tile" class="tile-6"></div> 
</div> 

#container { 
    width: 210px; 
    height: auto; 
    overflow: auto; 
} 

#tile { 
    width: 100px; 
    margin: 0 5px 5px 0; 
    background-color: #333; 
    float: left; 
} 

.tile-1 { height: 100px; } 
.tile-2 { height: 130px; } 
.tile-3 { height: 80px; } 
.tile-4 { height: 100px; } 
.tile-5 { height: 110px; } 
.tile-6 { height: 150px; } 

Я сделал это раньше, делая каждый столбец имеет свой собственный контейнер, но когда окно браузера сжимается мне нужно «плитка», чтобы объединить, но сохранить их порядок, переходя от чтения страницы, как книга, чтобы читать ее как список для меньших экранов.

Заранее спасибо. Matt

Answer 1

Используйте один из этих

• Isotope (вероятно, самый популярный)
• Masonry
• jQuery.waterfall
• Wookmark jQuery plugin

Смотрите примеры и вы добьетесь это легко.