jQuery infinite scroll 무한스크롤

제이쿼리 무한스크롤 infiniteScroll

---

얼마전 컴퓨터를 포멧 이후 아직 포토샵을 설치 하기 전이라.. 이미지는 대충 웹에서 사용하는 포토샵으로 대처..

나름 쓸만한듯... https://pixlr.com/editor/ 를 클릭하면 이동 

스크롤을 내릴때 마다 객체가 생성되는 제이쿼리 무한스크롤 infinite Scroll 이라고도 하고.. 

일단 처음 만들어봤는데 여기저기 돌아다니는 소스도 많고... 크게 어렵거나 한것 같지는 않았는데..

그냥 내 입맛에 맞게 만들어보았다.

* {margin:0; padding:0; list-style: none;}
.infiniteScroll {border:1px solid #ccc; width:200px; font-size:0;}
.infiniteScroll img {height:100%; width:100%; }

(function(){
    var num = 0;
    $(window).scroll(function(){
        // 조건식에서 == 보다 >= 를 사용 한 이유
        // == 스크롤 높이가 뭐빼기 뭐해서 같으면 끝까지 왔다라고 생각하는건데 >= 는 스크롤높이가 뭐빼기 뭐보다 더 커도(더 밑으로 내려가있어도) 끝까지 간거다 
        // 브라우저마다 특성이 다르기 때문에 같다보다는 크거나 같음으로 진행
        if($(window).scrollTop() >= $(document).height() - $(window).height()){ // 스크롤의 마지막 값을 인식한다.
            var $clone = $('.img').eq(num).first().clone()
            num++
            $('.infiniteScroll').append($clone)
            console.log(num);
        }
    })
})();

sub's

Blog