테스트 사이트 - 개발 중인 베타 버전입니다

무한 스크롤 (이미지 갤러리용)

· 11년 전 · 3547

  이미지 갤러리용으로 무한스크롤이 필요할 경우..라이브러리를 이용하는 경우가 있습니다. 

  라이브러리를 써도 무관하지만 아무래도 원리를 알면 더 좋겠죠.. 

  scrollTop과 height를 이용한 별로 어렵지 않은 코드?입니다.
 
  <div style="height:500px;background:#eee" id="content">
  컨텐츠..
  </div>

 <!-- 무한 스크롤 이미지 갤러리 영역 -->
  <div style="background:green" id="gallery">
   이미지 갤러리

   <div style='width:100px;height:100px;border:1px solid red' class='photo'>1</div>
   <div style='width:100px;height:100px;border:1px solid red' class='photo'>2</div>
   <div style='width:100px;height:100px;border:1px solid red' class='photo'>3</div>
  </div>

 <!-- // 무한 스크롤 이미지 갤러리 영역 -->

  <script type="text/javascript">

 
 $(document).ready(function() {  
 var $window = $(window);
 
 function checkScrollPosition() {
  var distance = $window.scrollTop() + $window.height();

  if ($('#content').height()+$('#gallery').height() <= distance) {
  
   if($(".photo").length < 10)
   {
    // next page 효과 , 예제를 위해서 임의의 박스 삽입
    $("#gallery").append("<div style='width:100px;height:100px;border:1px solid red' class='photo'>"+($(".photo").length+1)+"</div>");
   }
  }
 }
 

 $window.scroll(checkScrollPosition).scroll();
 });
  </script>
 

 

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
12333
12332
12331
12329
12328
12327
12326
12325
12324
12323
12322
12321
12320
12319
12318
12317
12316
12315
12314
12313
12312
12311
12310
12309
12308