Кирпичные изображения иногда перекрываются

У меня есть Фотогалерея с несколькими тысячами изображений, разделенных на категории плюс топ-списки и функцией поиска (Joomla, PHP, mysqli).
Поэтому я включил стиль масонства с загруженными изображениями и бесконечной функцией прокрутки. Все работает нормально, но иногда изображения перекрываются, и мне нужно обновить страницу.

Надеюсь, что кто-то может мне помочь — я должен подумать об одной или нескольких ошибках, так как я довольно новичок в этих сценариях. Пожалуйста объясните как новичку;)

Заранее спасибо,
Johann

Код PHP страницы:

<div id="jgal-masonry">
<div class="jgal-grid-sizer"></div>
<?php for($row_count = 0; $row_count < $num_rows; $row_count++ ): ?>
<?php for($col_count = 0; ($col_count < $this->_config->get('jg_toplistcols')) && ($index < $count); $col_count++):
$row = $this->rows[$index]; ?>
<div class="jgal-brick">
<a href="<?php echo $row->link; ?>"><img src="<?php echo $row->thumb_src; ?>" /></a>
<div><a href="<?php echo $row->link; ?>"><?php echo ($row->imgtitle; ?></a></div>
</div>
<?php $index++; ?>
<?php endfor ?>
<?php endfor ?>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="/includes/jquery-ias.min.js"></script>
<script type="text/javascript" src="/includes/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="/includes/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="/includes/loadmore.js"></script>

CSS:

.jgal-masonry{margin:0 auto;padding:0;-moz-column-gap:1.5em;-webkit-column-gap:1.5em;column-gap:1.5em;font-size:.85em;}
.jgal-brick{display:inline-block;padding:2px;margin:auto;margin-bottom:1px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;position:relative;line-height:1em;}
.jgal-brick{width:24.7%;}
.jgal-grid-sizer{width:25%;}
.jgal-grid-sizer:after{content:'';display:block;clear:both;}
@media only screen and (min-width:400px){.jgal-masonry{-moz-column-count:2;-webkit-column-count:2;column-count:2;}}
@media only screen and (min-width:700px){.jgal-masonry{-moz-column-count:3;-webkit-column-count:3;column-count:3;}}
@media only screen and (min-width:900px){.jgal-masonry{-moz-column-count:4;-webkit-column-count:4;column-count:4;}}
@media only screen and (min-width:1100px){.jgal-masonry{-moz-column-count:4;-webkit-column-count:4;column-count:4;}}
@media only screen and (min-width:1280px){.jgal-wrapper{width:1260px;}}
@media screen and (max-width:1224px){.jgal-grid-sizer{width:25.00%;}.jgal-brick{width:24.70%;}}
@media screen and (max-width:720px){.jgal-grid-sizer{width:33.33%;}.jgal-brick{width:33.33%;}}
@media screen and (max-width:480px){.jgal-grid-sizer{width:100%;}.jgal-brick{width:100%;}}
.ias-spinner{position:absolute;bottom:10px;width:100%;text-align:center;margin-left:-16px;}
.ias-noneleft{text-align:center;color:#ffffff;background-color:#6e9c27;border-radius:5px;position:absolute;width:100%;bottom:-15px;}

И Javascript (loadmore.js):

var container=document.querySelector('#jgal-masonry');
jQuery("#jgal-masonry").imagesLoaded(function(){
var msnry=new Masonry(container,{
itemSelector:'.jgal-brick',
columnWidth:'.jgal-grid-sizer',});
var ias=jQuery.ias({container:'#jgal-masonry',
item:'.jgal-brick',
pagination:'.pagination',
next:'.pagination-next a',
negativeMargin:30,delay:250,
isAnimated: true,
animationOptions: {
duration: 750,
queue: false,}
});
ias.on('render',function(items){$(items).css({opacity:0});});
ias.on('rendered',function(items){msnry.appended(items);});
ias.extension(new IASSpinnerExtension({html:'<div class="ias-spinner" style="text-align: center; font-size:150%; color: #CCCCCC;"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><br />Loading more Images...</div>'}));
ias.extension(new IASNoneLeftExtension({text:'<div class="ias-noneleft"><em>You reached the end!</em></div>',}));
});