Question

我有一个照片库，其中有几千个图像分为类别，顶部列表和搜索功能（Joomla，PHP，mysqli）。因此我将砌成的样式与图像加载和无限滚动功能相结合。一切正常，但有时图像重叠，我需要刷新页面。

希望有人可以帮助我 - 我认为必须有一个或多个错误，因为我对这些脚本编写的东西很新。请向新秀解释;）

提前谢谢你，约翰

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>',}));
});

砌体图像有时会重叠

0 个答案: