我想要 3 列 Masonry.js

Question

我正在建立一个博客网站。我要在那里放置一个微缩模型。我想要这样的布局：
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>

Answer 1

.post 的右边距太大。您的容器宽 1140 像素，post 宽 385 像素（宽度 + 右边距）。 385 * 3 = 1155 像素，比您的容器宽，因此 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>

我想要 3 列 Masonry.js

I want 3 columns with Masonry.js

html

javascript

css

masonry