Как создать этот макет с помощью CSS

Question

Я пытаюсь получить этот макет с помощью CSS, но самая близкая реализация, чтобы получить его от pinterest.com, но им нужен Javascript для фактического получения макета. Мне нужно знать, могу ли я сделать это без использования Javascript для вычисления позиции следующего элемента.

Answer 1

Вы можете использовать CSS3 multi-column layouts. Содержимое распространяется внутри столбцов, таких как газета. Браузеры распространяют контент таким образом, чтобы все столбцы были одинаковыми (ish). Однако обратите внимание, что (i) содержимое отображается сверху вниз, слева направо (ii) the browser support is limited at the moment.

$("#button1").on("click", function() { 
 
    $("#container > div").height(function() { 
 
    return Math.floor(Math.random() * 300); 
 
    }); 
 
});

#container { 
 
    -webkit-column-count: 3; 
 
    -moz-column-count: 3; 
 
    column-count: 3; 
 
    -webkit-column-gap: 1em; 
 
    -moz-column-gap: 1em; 
 
    column-gap: 1em; 
 
} 
 
#container > div { 
 
    -webkit-column-break-inside: avoid; 
 
    page-break-inside: avoid; 
 
    break-inside: avoid; 
 
    min-height: 100px; 
 
    border-bottom: 1em solid white; 
 
    background-color: powderblue; 
 
} 
 
#button1 { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
</div> 
 
<input id="button1" type="button" value="Randomize box sizes">

Что касается размеров экрана: вы можете использовать запросы CSS медиа, чтобы контролировать количество столбцов. Например, вы можете выбрать 4 столбца на 1000px +, 3 столбца на 800px + и два столбца на меньших экранах.

Answer 2

Вам просто нужно иметь три плавающих контейнеров, например:

HTML:

<div class="container"></div> 
<div class="container"></div> 
<div class="container"></div> 

CSS:

.container { float: left; width: 30%; } 

, а затем добавить содержимое, strechted до 100% ширины.

<div class="container"> 
    <div>1</div> 
    <div>4</div> 
</div> 
<div class="container"></div> 
<div class="container"></div> 

CSS:

.container > div { width: 100%; } 

Это только простая идея, но если вы попробуете вы получите желаемые результаты.