Я хочу 3 колонки с Masonry.js - PullRequest
Новая
       3

Я хочу 3 колонки с Masonry.js

0 голосов
/ 07 марта 2019


Я создаю блог-сайт.Я собираюсь иметь там посты миниатюр.Я хочу получить макет, подобный следующему:
effect
Я нашел библиотеку под названием Masonry.js, это идеальное решение для меня, но я понятия не имею, как мне нужно это настроить.Я ищу помощь!:)
Может, я должен изменить свой метод?Я пытался плавать, сетка, столбцы ...

Спасибо всем заранее! 

.container {
  max-width: 1140px;
  min-width: 360px;
  padding: 0 15px 0 15px;
  margin: auto;
}
.float {
  float: left;
}
body {
  background-color: #E5E5E5;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
}
/*------NAGŁÓWEK------*/
header {
  background-color: #fff;
  font-size: 1em;
  border-bottom: 4px solid #E88F30;
  font-weight: 800;
  overflow: auto;
  /*padding: 25px 0;*/
  height: 120px;
  box-shadow: 0 5px 20px #c2c2c2;
  top: 0;
  width: 100%;
}
header .container {
  -ms-transform: translateY(30%);
  transform: translateY(30%);
}
header img {
  width: 250px;
  margin-right: 30px;
}
header nav {
  text-transform: uppercase;
  /*padding: 20px 0 0;*/
  box-sizing: border-box;
  -ms-transform: translateY(50%);
  transform: translateY(50%);
}
header nav ul li {
  float: left;
  padding: 10px;
  border-radius: 7px;
  -webkit-transition: background-color 0.3s ease-in-out;
  -moz-transition: background-color 0.3s ease-in-out;
  -o-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}
header nav ul li:hover {
  background-color: #EDB034;
}
header nav ul li a:link {
  color: #121212;
  text-decoration: none;
}
header nav ul li a:hover {
  text-decoration: none;
}
header nav ul li a:visited {
  color: #121212;
}
/*------POST------*/
.container2 {
  margin-top: 40px;
}
.post {
  background-color: #fff;
  margin: 0 25px 20px 0;
  width: 360px;
  border-radius: 15px;
  -webkit-transition: box-shadow 0.2s ease-in-out;
  -moz-transition: box-shadow 0.2s ease-in-out;
  -o-transition: box-shadow 0.2s ease-in-out;
  transition: box-shadow 0.2s ease-in-out;
}
.post img {
  width: inherit;
  border-radius: 15px 15px 0 0;
  -webkit-border-radius: 15px 15px 0 0;
  -moz-border-radius: 15px 15px 0 0;
  -ms-border-radius: 15px 15px 0 0;
  -o-border-radius: 15px 15px 0 0;
}
.post:hover {
  box-shadow: 10px 10px 35px #b9b9b9;
}
.post-inside {
  padding: 20px 30px;
  overflow: auto;
}
.post-inside * {
  margin-bottom: 8px;
}
.post-inside h3 {
  font-weight: 800;
  font-size: 1.1em;
  line-height: 20px;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.post-inside h3:hover {
  color: #EDB034;
  cursor: pointer;
}
.post-inside .article-min {
  text-align: justify;
  font-size: 0.9em;
  line-height: 16px;
}
.post-inside .more {
  font-weight: 800;
  font-size: 0.95em;
  margin-bottom: 0;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
}
.post-inside .more .more-text,
.post-inside .more i {
  float: right;
}
.post-inside .more i {
  margin-left: 5px;
  font-size: 1.2em;
}
.post-inside .more:hover {
  color: #EDB034;
  cursor: pointer;
}
.meta {
  height: 20px;
  color: #444444;
}
.meta i::before {
  margin: 0;
}
.meta i {
  margin-right: 5px;
  font-size: 0.95em;
  line-height: 20px;
}
.meta .text {
  font-size: 0.7em;
  line-height: 20px;
}
.meta div.float {
  height: 7px;
}
.meta .author {
  width: 160px;
}
.meta .date {
  width: 90px;
}
.meta .comments {
  width: 30px;
}
<!DOCTYPE html>
<html lang="pl-PL">

<head>
<title>He Reads! | Z książką w ręce</title>
<meta charset="utf-8">
<meta name="author" content="Konrad Szczepanowski">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,800&amp;subset=latin-ext" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style/css-reset.css">
<link rel="stylesheet" href="fontello/css/fontello.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>

<body>
<header>
    <div class="container">
        <img src="img/hereads-logo.png" alt="He Reads!" class="float">
        <nav class="float">
            <ul>
                <li><a href="#">Książka</a></li>
                <li><a href="#">Serial</a></li>
                <li><a href="#">Wylosuj</a></li>
            </ul>
        </nav>
        <div style="clear: both;"></div>
    </div>
</header>
<div class="container container2">
    <div class="post">
        <img src="img/dziewczyna.jpg" alt="dziew">
        <div class="post-inside">
            <h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
            <div class="meta">
            <div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
            <div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
            <div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
            </div><div style="clear: both;"></div>
            <article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates</article>
            <div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
        </div>
        
    </div>
    <div class="post">
        <img src="img/dziewczyna.jpg" alt="dziew">
        <div class="post-inside">
            <h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
            <div class="meta">
            <div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
            <div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
            <div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
            </div><div style="clear: both;"></div>
            <article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates aliquid veritatis saepe consequuntur? Sint cum ipsum libero? Lorem ipsum dolor sit amet consectetur adipisicing.</article>
            <div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
        </div>
        
    </div>
    <div class="post">
        <img src="img/dziewczyna.jpg" alt="dziew">
        <div class="post-inside">
            <h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
            <div class="meta">
            <div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
            <div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
            <div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
            </div><div style="clear: both;"></div>
            <article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates aliquid veritatis saepe consequuntur? Sint cum ipsum libero?</article>
            <div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
        </div>
        
    </div>
    <div class="post">
        <img src="img/dziewczyna.jpg" alt="dziew">
        <div class="post-inside">
            <h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
            <div class="meta">
            <div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
            <div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
            <div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
            </div><div style="clear: both;"></div>
            <article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates</article>
            <div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
        </div>
        
    </div>
    <div class="post">
        <img src="img/dziewczyna.jpg" alt="dziew">
        <div class="post-inside">
            <h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
            <div class="meta">
            <div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
            <div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
            <div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
            </div><div style="clear: both;"></div>
            <article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates aliquid veritatis saepe consequuntur? Sint cum ipsum libero? Lorem ipsum dolor sit amet consectetur adipisicing.</article>
            <div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
        </div>
        
    </div>
    <div class="post">
        <img src="img/dziewczyna.jpg" alt="dziew">
        <div class="post-inside">
            <h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
            <div class="meta">
            <div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
            <div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
            <div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
            </div><div style="clear: both;"></div>
            <article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates aliquid veritatis saepe consequuntur? Sint cum ipsum libero? Lorem ipsum dolor sit amet consectetur adipisicing.</article>
            <div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
        </div>
        
    </div>
</div>

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.container2').masonry({
            // options
            itemSelector: '.post',
            
        });
    });
    
</script>
</body>

</html>

1 Ответ

0 голосов
/ 07 марта 2019

Правое поле для .post слишком велико.Ваш контейнер имеет ширину 1140 пикселей, а размер поста - 385 пикселей (ширина + правое поле).385 * 3 = 1155px, шире, чем ваш контейнер, поэтому Masonry.js создает два столбца вместо трех.Уменьшите правое поле для .post до 20px. 

.container {
  max-width: 1140px;
  min-width: 360px;
  padding: 0 15px 0 15px;
  margin: auto;
}
.float {
  float: left;
}
body {
  background-color: #E5E5E5;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
}
/*------NAGŁÓWEK------*/
header {
  background-color: #fff;
  font-size: 1em;
  border-bottom: 4px solid #E88F30;
  font-weight: 800;
  overflow: auto;
  /*padding: 25px 0;*/
  height: 120px;
  box-shadow: 0 5px 20px #c2c2c2;
  top: 0;
  width: 100%;
}
header .container {
  -ms-transform: translateY(30%);
  transform: translateY(30%);
}
header img {
  width: 250px;
  margin-right: 30px;
}
header nav {
  text-transform: uppercase;
  /*padding: 20px 0 0;*/
  box-sizing: border-box;
  -ms-transform: translateY(50%);
  transform: translateY(50%);
}
header nav ul li {
  float: left;
  padding: 10px;
  border-radius: 7px;
  -webkit-transition: background-color 0.3s ease-in-out;
  -moz-transition: background-color 0.3s ease-in-out;
  -o-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}
header nav ul li:hover {
  background-color: #EDB034;
}
header nav ul li a:link {
  color: #121212;
  text-decoration: none;
}
header nav ul li a:hover {
  text-decoration: none;
}
header nav ul li a:visited {
  color: #121212;
}
/*------POST------*/
.container2 {
  margin-top: 40px;
}
.post {
  background-color: #fff;
  margin: 0 20px 20px 0;
  width: 360px;
  border-radius: 15px;
  -webkit-transition: box-shadow 0.2s ease-in-out;
  -moz-transition: box-shadow 0.2s ease-in-out;
  -o-transition: box-shadow 0.2s ease-in-out;
  transition: box-shadow 0.2s ease-in-out;
}
.post img {
  width: inherit;
  border-radius: 15px 15px 0 0;
  -webkit-border-radius: 15px 15px 0 0;
  -moz-border-radius: 15px 15px 0 0;
  -ms-border-radius: 15px 15px 0 0;
  -o-border-radius: 15px 15px 0 0;
}
.post:hover {
  box-shadow: 10px 10px 35px #b9b9b9;
}
.post-inside {
  padding: 20px 30px;
  overflow: auto;
}
.post-inside * {
  margin-bottom: 8px;
}
.post-inside h3 {
  font-weight: 800;
  font-size: 1.1em;
  line-height: 20px;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.post-inside h3:hover {
  color: #EDB034;
  cursor: pointer;
}
.post-inside .article-min {
  text-align: justify;
  font-size: 0.9em;
  line-height: 16px;
}
.post-inside .more {
  font-weight: 800;
  font-size: 0.95em;
  margin-bottom: 0;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
}
.post-inside .more .more-text,
.post-inside .more i {
  float: right;
}
.post-inside .more i {
  margin-left: 5px;
  font-size: 1.2em;
}
.post-inside .more:hover {
  color: #EDB034;
  cursor: pointer;
}
.meta {
  height: 20px;
  color: #444444;
}
.meta i::before {
  margin: 0;
}
.meta i {
  margin-right: 5px;
  font-size: 0.95em;
  line-height: 20px;
}
.meta .text {
  font-size: 0.7em;
  line-height: 20px;
}
.meta div.float {
  height: 7px;
}
.meta .author {
  width: 160px;
}
.meta .date {
  width: 90px;
}
.meta .comments {
  width: 30px;
}
<!DOCTYPE html>
<html lang="pl-PL">

<head>
<title>He Reads! | Z książką w ręce</title>
<meta charset="utf-8">
<meta name="author" content="Konrad Szczepanowski">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,800&amp;subset=latin-ext" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style/css-reset.css">
<link rel="stylesheet" href="fontello/css/fontello.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>

<body>
<header>
    <div class="container">
        <img src="img/hereads-logo.png" alt="He Reads!" class="float">
        <nav class="float">
            <ul>
                <li><a href="#">Książka</a></li>
                <li><a href="#">Serial</a></li>
                <li><a href="#">Wylosuj</a></li>
            </ul>
        </nav>
        <div style="clear: both;"></div>
    </div>
</header>
<div class="container container2">
    <div class="post">
        <img src="img/dziewczyna.jpg" alt="dziew">
        <div class="post-inside">
            <h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
            <div class="meta">
            <div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
            <div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
            <div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
            </div><div style="clear: both;"></div>
            <article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates</article>
            <div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
        </div>
        
    </div>
    <div class="post">
        <img src="img/dziewczyna.jpg" alt="dziew">
        <div class="post-inside">
            <h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
            <div class="meta">
            <div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
            <div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
            <div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
            </div><div style="clear: both;"></div>
            <article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates aliquid veritatis saepe consequuntur? Sint cum ipsum libero? Lorem ipsum dolor sit amet consectetur adipisicing.</article>
            <div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
        </div>
        
    </div>
    <div class="post">
        <img src="img/dziewczyna.jpg" alt="dziew">
        <div class="post-inside">
            <h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
            <div class="meta">
            <div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
            <div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
            <div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
            </div><div style="clear: both;"></div>
            <article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates aliquid veritatis saepe consequuntur? Sint cum ipsum libero?</article>
            <div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
        </div>
        
    </div>
    <div class="post">
        <img src="img/dziewczyna.jpg" alt="dziew">
        <div class="post-inside">
            <h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
            <div class="meta">
            <div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
            <div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
            <div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
            </div><div style="clear: both;"></div>
            <article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates</article>
            <div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
        </div>
        
    </div>
    <div class="post">
        <img src="img/dziewczyna.jpg" alt="dziew">
        <div class="post-inside">
            <h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
            <div class="meta">
            <div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
            <div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
            <div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
            </div><div style="clear: both;"></div>
            <article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates aliquid veritatis saepe consequuntur? Sint cum ipsum libero? Lorem ipsum dolor sit amet consectetur adipisicing.</article>
            <div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
        </div>
        
    </div>
    <div class="post">
        <img src="img/dziewczyna.jpg" alt="dziew">
        <div class="post-inside">
            <h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
            <div class="meta">
            <div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
            <div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
            <div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
            </div><div style="clear: both;"></div>
            <article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates aliquid veritatis saepe consequuntur? Sint cum ipsum libero? Lorem ipsum dolor sit amet consectetur adipisicing.</article>
            <div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
        </div>
        
    </div>
</div>

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.container2').masonry({
            // options
            itemSelector: '.post',
            
        });
    });
    
</script>
</body>

</html>
...