핀터레스트 스타일 이미지 최신글에 무한스크롤을 적용 ....
관련링크
본문
핀터레스트 스타일 이미지 최신글에 무한스크롤을 적용해
보고 싶은데요 ....
적용한곳 > http://guhara.co.kr
제작자 분이 갤러리로 만드려다 포기 하시고 최신글로
만들어 놓으셨다고 하시더군요. 현재는 보여지는 글수를 999로
해놓아 한페이지 다 보여지는데요 .... 스크롤을 내렸을때 이미지가
보여 졌으면 합니다. 감을 못잡고 있네요.
최신글에 적용해 보셨거나 아시는 분은 조언 좀 부탁 드립니다.
답변 4
ajax를 이용하셔서 만드셔야 합니다.
무한스크롤 처리를 위한 방식은
더보기 기능이 먼저 작동되는게 우선입니다.
페이징을 할때 버튼을 눌러 다음페이지를 이동하는개념에서
전체 레이아웃을 통으로 구성하는게 아니라.
실제 리스트업될 내용만 구성을 합니다.
즉 기존의 그누보드의 개념에서 분할처리를 해야하는게 우선작업입니다.
1. 헤더,푸터 다 날린 상태로
컨텐츠에 접근하는 개념으로 확장을 하고
특정 div영역에 내용을 불러들입니다.
이건 jquery에 있는 load를 활용해서 처리가 가능합니다.
불러들일때 load로 해당 페이징에 해당되는 영역을 로딩시켜야 합니다.
추상적으로 접근하기때문에 개념을 종이를 여러장두어 정리하면서 개발하시면 도움이 됩니다.
페이징처리를 javascript에서 변수값으로 관리를 해야 하기때문에
현재 페이징을 불러온 포인터값(페이징위치)를 저장할 변수로 페이지를 관리하고
다음페이지는 해당 포인터값+1로 접근해서 로딩시킵니다.
페이징단위는 그누에서 사용하는 그대로 사용가능하고
[더보기] 버튼이 클릭되었을때 위의 스크립트가 다음페이지를 로딩하는게 성공하면
1차 성공입니다.
그후에 마우스로 스크롤할대 불러오게 하려면
컨텐츠의 위치정보를 기억하는 변수가 필요합니다.
즉, 컨텐츠의 맨 하단의 값이 화면상의 특정영역(화면하단에서 20%가량에 위치했을때 혹은 15% 정도에 위치했을때) 더보기 기능이 눌린것처럼 작동하게끔
스크롤이벤트를 제어해야 합니다.
구동방식은 버튼대신 화면상의 특정영역이 스크롤되는 시점에 발동된 이벤트에 적용되어야합니다.
다음페이지가 없느경우
즉, 페이지를 전달할 값이 없을때
화면에 메세지 혹은 아무런 메시지 없이 오류도 안내보내야 하는것도 필요합니다.
스크롤같은경우 불필요한 이벤트가 발생하지 않도록 더이상 불러올내용이 없는경우
이벤트 구동이 중지되는 옵션도 추가해두면 좀더 안정저인 화면 스크롤을 구성할수있습니다.
페이지 로드를 화면전화없이 처리하는 기법은
영카트의 상품관리에서 관련상품영역
혹은,
영카트의 이용후기의 페이징영역등을 참고하셔서 처리하시는게 좋습니다.
위의 예제를 들어두신 핀터레스트는 잘만든 스크립트네요
거기에 더보기/무한스크롤 기능을 더하면 좋은 작품이 되겠네요
시간이 되면 시도해보고싶은 내용입니다만
개념적으로만 설명드릴수밖에 없어서 미안한 마음입니다.
잘 해결하시길 ...
세분 답변 주셔서 고맙습니다. 구글에 뒤져보니
소스가 있기는 있네요. 잘 적용 될런지 ....
lazy load 는 이전에 사용해 봐서 ....
이걸로는 좀 별로겠죠? 일단 부딪쳐 보겠습니다.^^
맛점들 하세요.
