Создаём адаптивные html блоки в виде кирпичной кладки

Пример реализации адаптивных html блоков с содержанием в виде кирпичной кладки исключительно средствами CSS3, без использования javascript

HTML

<div class="masonry">
    <!-- Адаптивные блоки с содержанием -->
   <div class="item">
       <img src="http://dbmast.ru/wp-content/uploads/2014/01/dbmast2.jpg">
           <br>Онлайн - В состояянии постоянного подключения... <a href="#">Подробнее »</a>
    </div>
    
   <div class="item">
       <img src="http://dbmast.ru/wp-content/uploads/2014/05/planer-preview.jpg">
           <br>
               <b>Planer</b> — элегантная, профессиональная тема оформления WordPress, отлично подойдёт для тех, кто планирует создать проект с отображением большего объёма различного контента. <a href="#">Подробнее »</a>
   </div>
    
   <div class="item">
       <img src="http://dbmast.ru/wp-content/uploads/2014/02/vide-theme6.jpg">
       <br>
       <b>Темы Wordpress</b> - В этом разделе вы найдете обзоры и подборки самых новых разработок тем оформления, для  популярной системы управления сайтом -  WordPress. <a href="http://dbmast.ru/10-novyh-adaptivnyh-foto-video-tem-wordpress">Подробнее »</a>
     </div>
    
   <div class="item">
       <img src="http://s7.hostingkartinok.com/uploads/images/2014/08/54dcea5a0ea58b710a279fbb93676e17.jpg">
           <br>
               <b>Сниппеты CSS</b> - В этом разделе собраны полезные  и «правильные» стили и сниппеты, которые помогут ускорить процесс разработки сайта, а также оптимизировать верстку.. <a href="http://dbmast.ru/category/snippety">Подробнее »</a>
    </div>
    
   <div class="item">
       <img src="http://dbmast.ru/wp-content/uploads/2014/03/themeforest2.gif">
       <br>
       <b>ThemeForest</b> - крупнейшая студия веб-дизайна Themeforest разрабатывает темы и шаблоны для оформления сайтов под управлением наиболее распространенных CMS-продуктов, таких как Joomla, Drupal и WordPress. <a href="#">Подробнее »</a>
   </div>
    
   <div class="item">
		<img src="http://dbmast.ru/wp-content/uploads/2013/11/3d2.jpg">
           <br>
            Скачав и изучив этот новый видеокурс, вы уже сегодня, создадите свой первый сайт,...

CSS

/* Подключение шрифта Google */
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600,700&subset=latin,cyrillic");

/* Базовые стили демо-страницы */
body {
    font: 1em/1.67 'Open Sans', Arial, Sans-serif;
    margin: 0;
    background: #e9e9e9;
}

/* Заголовок демо-страницы */
h1{
    text-align: center;
    font-weight: 400;
}

/* Общий контейнер */
.wrapper {
    width: 100%;
    margin: 3em auto;
}

/* ------------- Контейнер с адаптивными блоками------------- */
.masonry {
    margin: 1.5em 0;
    padding: 0;
    column-gap: 1.5em; /* Общее расстояние между колонками */
    font-size: .85em;
    -moz-column-gap: 1.5em; /* Расстояние между колонками для Firefox */
    -webkit-column-gap: 1.5em; /* Расстояние между колонками  для Safari, Chrome и iOS */
}

/* Элементы в виде плиток с содержанием */
.item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box; /* Изменения алгоритма расчета ширины и высоты элемента.*/
    -moz-box-sizing: border-box; /* Для Firefox */ 
    -webkit-box-sizing: border-box; /* Для Safari, Chrome, iOS иAndroid */ 
    box-shadow: 2px 2px 4px 0 #ccc; /* Внешняя тень плиток */
}

/* Стили картинок, видое и фреймов внутри адаптивных плиток */
img, iframe {
max-width: 100%;
height: auto;
display: block;
}

/* Стили ссылок внутри плиток */
.item a {
text-decoration: none;
color: #359CC6;
margin: 0 10px;
}

/* Стили ссылок при наведении */
.item a:hover {
color: #E88F00;    
border-bottom: 1px dotted #9F1D35;
}

/* Медиа-запросы для различных размеров адаптивного макета */
@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
   ...

JavaScript

В