Blog Content

    티스토리 뷰

    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



    '개발연습막쓰기 > jQuery' 카테고리의 다른 글

    jQuery 그래프 [graph] - 수치 적용  (0) 2019.08.23
    jQuery 수 더하기  (0) 2019.02.13
    jQuery 이미지 갤러리  (0) 2018.12.20
    setInterval 타이머  (0) 2018.12.09
    애트리뷰트 팝업 창 띄우기  (0) 2018.11.01

    Comments