Как сделать такои блоки (Портфолио)

270

11 марта 2017, 01:04

Недавно на каком то сайте увидел такой пример (Портфолио), мне понравилось,пожалуйста подскажите как это делается. Скриншот внизу.

Answer 1

Вариант 1:

.flexboxes { 
  display: flex; 
  flex-wrap: wrap; 
  height:200px; 
  flex-direction: column; 
} 
.flexboxes > div {width:200px;background-color:red;margin:3px;} 
.block0 {height: 60px;} 
.block1 {height: 80px;} 
.block2 {height: 70px;} 
.block3 {height: 90px;} 
.block4 {height: 80px;} 
.block5 {height: 100px;}

<div class="flexboxes"> 
  <div class="block0"></div> 
  <div class="block1"></div> 
  <div class="block2"></div> 
  <div class="block3"></div> 
  <div class="block4"></div> 
  <div class="block5"></div> 
</div>

Вариант 2 (с использованием скриптов):

$(function() { 
  $('.flexboxes').masonry({ 
    itemSelector: 'div' // обращаемся к пунктам 
  }); 
});

.flexboxes { 
  display: flex; 
  flex-wrap: wrap; 
  height:200px; 
  width: 630px; 
} 
.flexboxes > div {width:200px;background-color:red;margin:3px;} 
.block0 {height: 60px;} 
.block1 {height: 80px;} 
.block2 {height: 70px;} 
.block3 {height: 90px;} 
.block4 {height: 80px;} 
.block5 {height: 100px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="http://masonry.desandro.com/masonry.pkgd.js"></script> 
 
<div class="flexboxes"> 
  <div class="block0"></div> 
  <div class="block2"></div> 
  <div class="block4"></div> 
  <div class="block1"></div> 
  <div class="block3"></div> 
  <div class="block5"></div> 
</div>