2016년 5월 17일 화요일

웹 프로그래밍 5/17 - 11장 자바스크립트와 jQuery 응용 예제 (계속)

11장 자바스크립트와 jQuery 응용 예제 (계속)


  • 문서 객체 설정하기
  • 무한 스크롤
  • LightBox 플러그인
  • Masonry 플러그인
  • 갤러리 구현하기

실습

무한 스크롤 예제에서 스크롤바가 나타날만큼 컨텐트가 없다면 무한 스크롤이 동작하지 않음. 즉 아래와 같이 2개 정도의 <h1>태그만 만들면 스크롤바가 없기 때문에 무한 스크롤이 동작하지 않음.
var appendDocument = function () {
   for (var i = 0; i < 2; i++) {
   // 문서 객체를 생성합니다.
      $('<h1>Infinity Scroll</h1>').appendTo('body');
   }
};

스크롤바가 나타날 만큼 화면을 채우기 위해서는 어떻게 해야할까?
힌트: $(window).height()보다 $( 무엇 ).height()가 커질 때까지 컨텐트를 추가한다.