제이쿼리 무한스크롤 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 |