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

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

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

  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>
 
​