我有一个使用“Fancybox Gallery”和“Justified Gallery”的图片库页面。我刚刚添加了一个“加载更多”按钮，它在技术上工作正常，但问题是图像仍然占用空间/影响页面布局，因此最后一张图像和“加载更多”按钮。 我已经尝试了各种配置（即使我实际上并没有读/写 javascript）并且已经尽可能地解决了我认为这是导致问题的“合理画廊”，因为当我删除时差距消失了'合理的画廊'。 我怎样才能继续使用“Justified Gallery”和“Load More”功能，而图像仍然不占用页面空间？ 有谁知道为什么会发生这种情况？
/**
* Simple Load More
*
* Version: 1.4.0
* Author: Zeshan Ahmed
* Website: https://zeshanahmed.com/
* Github: https://github.com/zeshanshani/simple-load-more/
*/
!function(T){T.fn.simpleLoadmore=function(_){var f=T.extend({count:5,itemsToLoad:5,btnHTML:"",btnText:"View More",item:"",cssClass:"load-more",showCounter:!1,counterText:"Showing {showing} out of {total}"},_);T(this).each(function(t,n){var e,o=f.btnHTML,s=f.btnText,a=f.count,i=(f.itemsToLoad,f.item),l=f.cssClass,c=f.showCounter,d=f.counterText,u=T(this),h=u.find(i),m=T('<p class="slm__counter">'+d+"</p>");c&&u.append(m),o||(o='<a href="#" class="'+l+'__btn">'+s+"</a>"),e=T(o),_.itemsToLoad&&!isnaN(_.itemsToLoad)||(f.itemsToLoad=f.count),u.addClass(l),h.addClass(l+"__item"),!u.find("."+l+"__btn").length&&h.length>f.count&&u.append(e),e.add(m).html(function(t,n){var e=n.replace("{showing}",'<span class="slm__count slm__count--showing">'+a+"</span>");return e=e.replace("{total}",'<span class="slm__count slm__count--total">'+h.length+"</span>")});var r=u.find("."+l+"__btn");r.length||(r=e),h.length>f.count&&h.slice(f.count).hide(),r.on("click",function(t){t.preventDefault();var n=T(this),e=h.filter(":hidden"),o=e;-1!==f.itemsToLoad&&0<f.itemsToLoad&&(o=e.slice(0,f.itemsToLoad)),0<o.length&&o.fadeIn(),u.find(".slm__count--showing").text(h.filter(":visible").length),(e.length<=f.itemsToLoad||-1===f.itemsToLoad)&&n.remove()})})}}(jQuery);<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Load-more</title>
</head>
<body>
<div class="row justify-content-center">
<div class="col">
<div class="fancybox load-more">
<div id="justifiedGallery" class="justifiedGallery">
<a data-fancybox="images" group="fancybox"
href="assets/blot/Card-Room.jpg" data-caption="Card Room">
<img src="assets/blot/w640/Card-Room.jpg" alt="">
</a>
<a data-fancybox="images" group="fancybox"
href="assets/blot/Decade.jpg" data-width="3325" data-height="1871" data-caption="Decade">
<img src="assets/blot/w640/Decade.jpg" alt="">
</a>
<a data-fancybox="images" group="fancybox"
href="assets/blot/Door.jpg" data-width="" data-height="" data-caption="Door">
<img src="assets/blot/w640/Door.jpg" alt="">
</a>
<a data-fancybox="images" group="fancybox"
href="assets/blot/Living Room.jpg" data-width="" data-height="" data-caption="Living Room">
<img src="assets/blot/w640/Living Room.jpg" alt="">
</a>
<a data-fancybox="images" group="fancybox"
href="assets/blot/See-View.jpg" data-width="" data-height="" data-caption="Living Room">
<img src="assets/blot/w640/See-View.jpg" alt="">
</a>
<a data-fancybox="images" group="fancybox"
href="assets/blot/Stair.jpg" data-width="" data-height="" data-caption="Stair">
<img src="assets/blot/w640/Stair.jpg" alt="">
</a>
<a data-fancybox="images" group="fancybox"
href="assets/blot/Table.jpg" data-width="" data-height="" data-caption="Table">
<img src="assets/blot/w640/Table.jpg" alt="">
</a>
</div><!--justified gallery-->
</div><!--fancybox-->
</div><!--col-->
</div><!--row-->
<!-- http://fancyapps.com/fancybox/3/ -->
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.5/dist/jquery.fancybox.min.js"></script>
<!-- justifiedGallery-->
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="assets/js/jquery.justifiedGallery.min.js"></script>
<!-- Load More Script -->
<!-- Load More Script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jsdelivr.com/package/npm/simple-load-more"></script>
<script>
$('.load-more').simpleLoadmore({
item: 'a',count: 3,counterInBtn: true,btnText: 'View More {showing}/{total}',});
</script>
</body>
</html>