我正在使用colorlib网站上的重新打开免费模板。索引页上有一个显示9张图像网格的图库。在底部，我已加载更多图像。当我单击“加载”时，还需要显示另外9张图像，但它只显示12张而不是18张。
点击页面后加载页面时，它会显示前9张图像，而只显示12张图像而不是18张
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid" id="portfolio">
<div class="grid-sizer"></div>
<div class="grid-item element-item p_one_third post blogBox moreBox">
<a href="demo-images/reopen_home_image01.jpg" data-rel="prettyPhoto[gallery1]">
<img src="demo-images/reopen_home_image01.jpg" alt="" />
<div class="portfolio-text-holder">
<p class="portfolio-text">SMARTPHONE</p>
<p class="portfolio-type">GALLERY</p>
</div>
</a>
</div>
<div class="grid-item element-item p_one_third image blogBox moreBox">
<a href="https://vimeo.com/157276599" data-rel="prettyPhoto[gallery1]">
<img src="demo-images/reopen_home_image02.jpg" alt="" />
<div class="portfolio-text-holder">
<p class="portfolio-text">BOOK</p>
<p class="portfolio-type">VIDEO</p>
</div>
</a>
</div>
<div class="grid-item element-item p_one_third post blogBox moreBox">
<a href="https://www.youtube.com/watch?v=xEW_YXgRSIE" data-rel="prettyPhoto[gallery1]">
<img src="demo-images/reopen_home_image03.jpg" alt="" />
<div class="portfolio-text-holder">
<p class="portfolio-text">DOODLE</p>
<p class="portfolio-type">VIDEO</p>
</div>
</a>
</div>
<div class="grid-item element-item p_two_third image blogBox moreBox">
<a href="demo-images/reopen_home_image05.jpg" data-rel="prettyPhoto[gallery1]">
<img src="demo-images/reopen_home_image05.jpg" alt="" />
<div class="portfolio-text-holder">
<p class="portfolio-text">FOSTER</p>
<p class="portfolio-type">GALLERY</p>
</div>
</a>
</div>
<div class="grid-item element-item p_one_third blogBox moreBox">
<a href="single-portfolio.html">
<img src="demo-images/reopen_home_image04.jpg" alt="" />
<div class="portfolio-text-holder">
<p class="portfolio-text">STARLIGHT</p>
<p class="portfolio-type">ARTICLE</p>
</div>
</a>
</div>
<div class="grid-item element-item p_one_third blogBox moreBox">
<a href="https://vimeo.com/168939109" data-rel="prettyPhoto[gallery1]">
<img src="demo-images/reopen_home_image06.jpg" alt="" />
<div class="portfolio-text-holder">
<p class="portfolio-text">OPEN BOOK</p>
<p class="portfolio-type">VIDEO</p>
</div>
</a>
</div>
<div class="grid-item element-item p_one_third blogBox moreBox">
<a href="https://vimeo.com/166419987" data-rel="prettyPhoto[gallery1]">
<img src="demo-images/reopen_home_image07.jpg" alt="" />
<div class="portfolio-text-holder">
<p class="portfolio-text">BURGER</p>
<p class="portfolio-type">VIDEO</p>
</div>
</a>
</div>
<div class="grid-item element-item p_one_third blogBox moreBox">
<a href="single.html">
<img src="demo-images/reopen_home_image08.jpg" alt="" />
<div class="portfolio-text-holder">
<p class="portfolio-text">PRINTSCREEN</p>
<p class="portfolio-type">ARTICLE</p>
</div>
</a>
</div>
<div class="grid-item element-item p_one_third blogBox moreBox">
<a href="single.html">
<img src="demo-images/reopen_home_image09.jpg" alt="" />
<div class="portfolio-text-holder">
<p class="portfolio-text">BOTTLE</p>
<p class="portfolio-type">ARTICLE</p>
</div>
</a>
<div class="clear"></div>
</div>
<!-- loadmore -->
<div class="grid-item element-item p_one_third post blogBox moreBox" style="display: none;">
<a href="single-portfolio.html">
<img src="demo-images/11.jpg" alt="" />
<div class="portfolio-text-holder">
<p class="portfolio-text">SMARTPHONE</p>
<p class="portfolio-type">GALLERY</p>
</div>
</a>
</div>
<div class="grid-item element-item p_one_third image blogBox moreBox" style="display: none;">
<a href="single-portfolio.html">
<img src="demo-images/12.jpg" alt="" />
<div class="portfolio-text-holder">
<p class="portfolio-text">BOOK</p>
<p class="portfolio-type">VIDEO</p>
</div>
</a>
</div>
<div class="grid-item element-item p_one_third post blogBox moreBox" style="display: none;">
<a href="single-portfolio.html">
<img src="demo-images/13.jpg" alt="" />
<div class="portfolio-text-holder">
<p class="portfolio-text">DOODLE</p>
<p class="portfolio-type">VIDEO</p>
</div>
</a>
</div>
<div class="grid-item element-item p_two_third image blogBox moreBox" style="display: none;">
<a href="single.html">
<img src="demo-images/14.jpg" alt="" />
<div class="portfolio-text-holder">
<p class="portfolio-text">FOSTER</p>
<p class="portfolio-type">GALLERY</p>
</div>
</a>
</div>
<div class="grid-item element-item p_one_third blogBox moreBox" style="display: none;">
<a href="single-portfolio.html">
<img src="demo-images/15.jpg" alt="" />
<div class="portfolio-text-holder">
<p class="portfolio-text">STARLIGHT</p>
<p class="portfolio-type">ARTICLE</p>
</div>
</a>
</div>
<div class="grid-item element-item p_one_third blogBox moreBox" style="display: none;">
<a href="single.html">
<img src="demo-images/16.jpg" alt="" />
<div class="portfolio-text-holder">
<p class="portfolio-text">OPEN BOOK</p>
<p class="portfolio-type">VIDEO</p>
</div>
</a>
</div>
<div class="grid-item element-item p_one_third blogBox moreBox" style="display: none;">
<a href="single.html">
<img src="demo-images/17.jpg" alt="" />
<div class="portfolio-text-holder">
<p class="portfolio-text">BURGER</p>
<p class="portfolio-type">VIDEO</p>
</div>
</a>
</div>
<div class="grid-item element-item p_one_third blogBox moreBox" style="display: none;">
<a href="single.html">
<img src="demo-images/18.jpg" alt="" />
<div class="portfolio-text-holder">
<p class="portfolio-text">PRINTSCREEN</p>
<p class="portfolio-type">ARTICLE</p>
</div>
</a>
</div>
<div class="grid-item element-item p_one_third blogBox moreBox" style="display: none;">
<a href="single.html">
<img src="demo-images/19.jpg" alt="" />
<div class="portfolio-text-holder">
<p class="portfolio-text">BOTTLE</p>
<p class="portfolio-type">ARTICLE</p>
</div>
</a>
</div>
<!-- loadmore end -->
</div>