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を嫌わないでください]

まず、チャネル内の写真から配列prettyniceを作成します。

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

しかし、ああ、あなたは遠くで叫ぶかもしれません..

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

無限スクロール スクリプトを作成しているときに、同じ問題に遭遇しました。問題は、スクロール イベントが各スクロールのすべての小さなステオで発生することです。airbnb の InfinityJS で見つけた解決策は、〜 500 に設定された間隔を使用して、最後の間隔からのスクロールの違いを確認することです。次に、shouldShowに基づいてメソッドを実行しますscrollY

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