0

所以我在表达式引擎 2 中创建了一个画廊，坦率地说，我不太了解，所以我使用了大量的 javascript 来弥补它（如果你建议任何更简单的方法来做到这一点，我会喜欢你永远）

奇怪的是，当我在带有图片的块链接上使用浮动时，页面上的滚动开始变得疯狂。

<a href="#" class="popthisshit photoins" style=""><img height="170" src="'+quitenice[i]+'"></a>

我已经非常精确地隔离了这一点：

.photoins{ display:block; border:1px solid #666; height:140px; width:140px; overflow:hidden; margin:0px 0px 20px 20px; float:left;}
.photoins img{text-align:center; height: 240px; margin:-50% -50%;}

一旦我使用 float: left; 页面停止正确滚动。删除它，它很好.. __

这是代码 [不要讨厌 plzktnx]

我首先从频道中的照片创建数组：

{exp:channel:entries channel="galleries" disable="categories|category_fields|custom_fields|member_data|pagination" limit="1" status="open|closed"}
<script> 
var quitenice = new Array('{gallery_photos}{row_photo} ', '{/gallery_photos}');

但是哦whyyyy，你可能会在远处大喊..因为以下原因：在这里我创建了假分页以避免使用它，因为它被证明更重..

var zero = 0;
var size = 25;
var somecount = 0;

for (var i=zero; i<size; i+=1) {
    somecount+=1;
    document.write('<a href="#" class="popthisshit photoins" style=""><img height="170" src="'+quitenice[i]+'"></a>');
};

var newzero=zero+size; 
var newsize = size+newzero;

所以现在我们得到了第一组 25 张图片。这是图片锚

document.write('<a href="#" class="morePics"></a>');

而且，这是无限卷轴：

$(function () {
             var $win = $(window);
             $win.scroll(function () {
                 if ($win.height() + $win.scrollTop() == $(document).height()) {
                    if(quitenice.length >=newsize){ 
                        for (var ii=newzero; ii<newsize; ii+=1) {
                            $('.morePics').before('<a href="#" class="popthisshit photoins"><img src="'+quitenice[ii]+'"></a>');        
                        };
                        newzero += size;
                        newsize +=size;
                    }else{  
                        for (var ii=newzero; ii< quitenice.length-1; ii+=1) {
                            $(this).before('<a href="#" class="popthisshit photoins"><img src="'+quitenice[ii]+'"></a>');
                        };
                        $('.morePics').before('<span class="ender"></span>');
                        newzero += size;
                        newsize +=size;
                    }; 
                 }
             });
         });

</script>
{/exp:channel:entries}

所以删除float：left，它滚动得很好，但是在javascript中添加一堆position：absolutes似乎更倒退了。

我使用 1.8.0 jQuery 的一堆子库。我试图改变它和其他一切，但它是 float: left 让它变得有问题。帮助。

ps：popthisshit调用超轻灯箱，也和问题没多大关系！

4

1 回答 1

0

我在编写无限滚动脚本时遇到了同样的问题。问题是滚动事件会在每个滚动中的每个小 steo 处触发。我在 airbnb 的 InfinityJS 中找到的解决方案是使用设置为 ~500 的间隔来检查自上次间隔以来滚动的差异。然后shouldShow根据scrollY

var prevScroll = -1
window.setInterval(function () {
    currScroll = window.scrollY
    if (currScroll != prevScroll) {
        // check
    }
})
于 2013-01-26T02:08:57.427 回答