jQuery 워터폴 흐름 플러그인 Wookmark 사용 example_jquery

플러그인 다운로드: https://github.com/GBKS/Wookmark-jQuery 공식 홈페이지: http://www.wookmark.com/jquery-plugin

플러그인을 다운로드한 후 웹페이지에서 플러그인의 JS 파일을 참조하세요.

코드 복사 코드는 다음과 같습니다. HTML 코드 구조: 코드 복사 코드는 다음과 같습니다: 간단한 사용법: html 파일에 코드 추가 코드 복사 코드는 다음과 같습니다. jQuery(function($){ $(' #tiles li').wookmark(); }); 복잡한 사용법: 코드 복사 코드는 다음과 같습니다. jQuery(function($){ $('#tiles li').wookmark({ //폭포 흐름 레이아웃을 구현하는 객체입니다 autoResize: true, //창 크기가 변경되면 레이아웃이 다시 레이아웃됨을 나타내려면 true로 설정합니다. 컨테이너: $('#container' ), //이것은 컨테이너의 이름입니다. 이 컨테이너에는 CSS 속성 "position:relative"가 포함되어야 합니다. 그렇지 않으면 모든 것이 페이지의 왼쪽 상단에 압착되는 것을 볼 수 있습니다. offset: 12, // 인접한 두 요소 사이의 거리 itemWidth: 222, //지정된 객체의 너비 resizeDelay: 50 / /기본값은 50입니다 }); }) ; wookmark는 ajax와 함께 사용하여 데이터를 동적으로 로드할 수도 있지만 new는 나중에 다시 실행해야 합니다. 코드 복사 코드는 다음과 같습니다. var handler = $('#tiles li'); handler.wookmark(options); 이전에 이벤트를 바인딩한 경우 다시 실행하기 전에 이벤트를 삭제하세요. 코드 복사 코드는 다음과 같습니다. handler.wookmarkClear(); 비교 보기 많은 사람들이 롤링 로딩 사용 방법을 묻습니다. 설명하기 위한 예는 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. 다음은: var handler = null; //기본 속성 정의. var options = { autoResize: true, 컨테이너: $('#main'), 오프셋: 2 , itemWidth: 210 };

//스크롤 기능 정의 function onScroll(event) { //바닥까지 도달했는지 여부(여기서 판단 하단에서 100px 떨어져 있음) 데이터 로드 중). var closeToBottom = ($(window).scrollTop() $(window).height() > $(document).height() - 100); if(closeToBottom) { //AJAX가 로드한 데이터는 다음과 같습니다 $.ajax({url:"data.html", dataType:"html", Success:function(html){ //새 데이터를 개체에 추가합니다. $ ('#Waterfall').Append (html) // 원래 위치를 지웁니다. if (handler) handler.wookmarkClear (); // 새 Wookmark 개체 만들기 handler = $('#waterfall li'); handler.wookmark(options) 🎜> $(document).ready(new function() { // 스크롤 이벤트 바인딩. $(document).bind('scroll', onScroll); //첫 번째 레이아웃. handler = $('#waterfall li'); handler.wookmark( 옵션); });