Как называется этот вид макета?

Question

Я надеялся, что кто-то может сказать, что такое макетирование называется? See link

Я имею в виду, что коробки прекрасно организованы и не имеют лишнего пространства. Я даже видел веб-сайты, где они перестраиваются, если один из ящиков увеличен или что-то еще.

Итак, как это делается? Это просто чистый CSS, с помощью поплавков или что-то, или javascript и т. Д.?

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

Answer 1

Это называется Cascading grid layout, используя CSS и JavaScript, см. больше на http://masonry.desandro.com/

Answer 2

Это называется MASONRY

Кладка библиотека макет сетки JavaScript. Он работает путем размещения элементов в оптимальном положении на основе доступного вертикального пространства, сортировки , как каменщик, монтирующий камни в стене. Вероятно, вы видели его в во всем Интернете.

SOURCE

Я надеюсь, что это то, что вы ищете.

Answer 3

pinterest расположение?

Если вы хотите использовать CSS, это только tutorial using CSS3, который довольно впечатляет.

Начните с неупорядоченного списка:

<div id="container"> 
    <ul id="myContent"> 
     <li><img src="image1" alt=""></li> 
     <li><img src="image2" alt=""></li> 
    <li><img src="image3" alt=""></li> 
    <li><img src="image4" alt=""></li> 
    . . . 
    </ul> 
</div> 

Затем примените CSS:

@media only screen and (max-width : 1199px), 
only screen and (max-device-width : 1199px){ 
    #myContent { 
     -moz-column-count: 5; 
     -moz-column-gap: 0px; 
     -webkit-column-count: 5; 
     -webkit-column-gap: 0px; 
     column-count: 5; 
     column-gap: 0px; 
     width: 1000px; 
    } 

    #container { 
     width: 1000px; 
    } 
} 

@media only screen and (max-width : 999px), 
only screen and (max-device-width : 999px){ 
    #myContent { 
     -moz-column-count: 4; 
     -moz-column-gap: 0px; 
     -webkit-column-count: 4; 
     -webkit-column-gap: 0px; 
     column-count: 4; 
     column-gap: 0px; 
     width: 800px; 
    } 

    #container { 
     width: 800px; 
    } 
} 

@media only screen and (max-width : 799px), 
only screen and (max-device-width : 799px){ 
    #myContent { 
     -moz-column-count: 3; 
     -moz-column-gap: 0px; 
     -webkit-column-count: 3; 
     -webkit-column-gap: 0px; 
     column-count: 34; 
     column-gap: 0px; 
     width: 600px; 
    } 

    #container { 
     width: 600px; 
    } 
} 

@media only screen and (max-width : 599px), 
only screen and (max-device-width : 599px){ 
    #myContent { 
     -moz-column-count: 2; 
     -moz-column-gap: 0px; 
     -webkit-column-count: 2; 
     -webkit-column-gap: 0px; 
     column-count: 2; 
     column-gap: 0px; 
     width: 400px; 
    } 

    #container { 
     width: 400px; 
    } 
} 

Вот jsfiddle с ним работать: http://jsfiddle.net/PJpAt/