我无法让多个Masonry类型的投资组合在网页上正常运行。作为参考，砌体类型的组合应该如下所示 以下是模板站点的示例 （http://ottavio.kleis.agency/portfolio.html），如果你无法查看该页面，那么它就是一个4 * 3图像显示，其中两边的3幅图像的基本尺寸为1 * 1，中间的图像大小为2 * 2和2 * 1.
然而，当我尝试添加第二个投资组合时，从左上角向下的第二个图像移动到投资组合的底部，并留下应该存在的空白区域。
Which if the explanation wasn't clear looks like this
投资组合的代码就是这个
<section id="portfolio-gallery" data-folder="/portfolio" class="sep-top-md">
<div class="container">
<div id="filters" class="sep-bottom-lg">
<button data-filter="*" class="btn btn-sm btn-primary upper">show all</button>
<button data-filter=".branding" class="btn btn-sm upper">branding</button>
<button data-filter=".design" class="btn btn-sm upper">design</button>
<button data-filter=".photography" class="btn btn-sm upper">photography</button>
<button data-filter=".videography" class="btn btn-sm upper">videography</button>
</div>
</div>
<!-- Start Ajax Section-->
<div style="position:relative;" class="ajax-section section-gray">
<div class="closeProject"><a href="#loader"><i class="fa fa-times"></i></a></div>
<div class="loader"><i class="fa fa-circle-o-notch fa-spin fa-2x"></i></div>
<div class="container">
<div class="status-message"></div>
<div class="ajax-content-outer">
<div class="ajax-content-inner"></div>
<div class="project-navigation nav-arrows"><a href="#" class="nextProject"><span class="nav-arrow-next"></span></a><a href="#" class="prevProject"><span class="nav-arrow-prev"></span></a></div>
</div>
</div>
</div>
<!-- End Ajax Section-->
<ul id="isotope" class="portfolio isotope">
<li class="item videography">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/05.jpg" alt="Extreme Freestyle" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><a href="#!/portfolio/project.html?i=0" class="info ajax_load"><i class="fa fa-link fa-border"></i></a><a href="img/portfolio/05.jpg" data-rel="prettyPhoto[pp_gal]" title="Extreme Freestyle" class="info"><i class="fa fa-expand fa-border"></i></a>
<h4 class="upper">Extreme Freestyle</h4><span>Mood is a crucial component of well-being. It is an emotional state that can be influenced by personality or a variety of specific circumstances. This sub-category identifies worry, anxiety, happiness, mood fluctuations, and fatigue. Monitoring and managing mood can be vital for a student with regard to their life in general and school success.</span>
</div>
</div>
</div>
</li>
<li class="item photography width2x height2x">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/11asw5.jpg" alt="Looking at The Horizon" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><a href="#!/portfolio/project.html?i=1" class="info ajax_load"><i class="fa fa-link fa-border"></i></a><a href="img/portfolio/11asw5.jpg" data-rel="prettyPhoto[pp_gal]" title="Looking at The Horizon" class="info"><i class="fa fa-expand fa-border"></i></a>
<h4 class="upper">Looking at The Horizon</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item photography design">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/wr4c5.jpg" alt="Design Studio" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><a href="#!/portfolio/project.html?i=2" class="info ajax_load"><i class="fa fa-link fa-border"></i></a><a href="img/portfolio/wr4c5.jpg" data-rel="prettyPhoto[pp_gal]" title="Design Studio" class="info"><i class="fa fa-expand fa-border"></i></a>
<h4 class="upper">Design Studio</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item design">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/mac.jpg" alt="Minimalist Design" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><a href="#!/portfolio/project.html?i=3" class="info ajax_load"><i class="fa fa-link fa-border"></i></a><a href="img/portfolio/mac.jpg" data-rel="prettyPhoto[pp_gal]" title="Minimalist Design" class="info"><i class="fa fa-expand fa-border"></i></a>
<h4 class="upper">Minimalist Design</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item branding width2x">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/2048asxsax.jpg" alt="Business Card" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><a href="#!/portfolio/project.html?i=4" class="info ajax_load"><i class="fa fa-link fa-border"></i></a><a href="img/portfolio/2048asxsax.jpg" data-rel="prettyPhoto[pp_gal]" title="Business Card" class="info"><i class="fa fa-expand fa-border"></i></a>
<h4 class="upper">Business Card</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item branding">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/20aaaaa48.jpg" alt="Horst brand identity" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><a href="#!/portfolio/project.html?i=5" class="info ajax_load"><i class="fa fa-link fa-border"></i></a><a href="img/portfolio/20aaaaa48.jpg" data-rel="prettyPhoto[pp_gal]" title="Horst brand identity" class="info"><i class="fa fa-expand fa-border"></i></a>
<h4 class="upper">Horst brand identity</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item design photography">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/20sshsh48.jpg" alt="Infinity Mirror" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><a href="#!/portfolio/project.html?i=6" class="info ajax_load"><i class="fa fa-link fa-border"></i></a><a href="img/portfolio/20sshsh48.jpg" data-rel="prettyPhoto[pp_gal]" title="Infinity Mirror" class="info"><i class="fa fa-expand fa-border"></i></a>
<h4 class="upper">Infinity Mirror</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item design">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/247610222_460fa350b6_o.jpg" alt="Simple Desk Design" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><a href="#!/portfolio/project.html?i=7" class="info ajax_load"><i class="fa fa-link fa-border"></i></a><a href="img/portfolio/247610222_460fa350b6_o.jpg" data-rel="prettyPhoto[pp_gal]" title="Simple Desk Design" class="info"><i class="fa fa-expand fa-border"></i></a>
<h4 class="upper">Simple Desk Design</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
</ul>
</section>
我创建第二个产品组合所做的就是复制并粘贴该代码。我陷入困境并试图以多种方式解决问题，但我仍然无法修复它。任何帮助将不胜感激