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

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

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

코드 복사 코드는 다음과 같습니다.

<script src="jquery-1.8.2.min.js"></script>
<script src="jquery. wookmark.min.js"></script> ;

HTML 코드 구조:

코드 복사 코드는 다음과 같습니다:

<div id ="main">
<ul id="tiles">
<li><img src="images/1 .jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="이미지 /3.jpg"></li>
</ul>
</div>

간단한 사용법: html 파일에 코드 추가

코드 복사 코드는 다음과 같습니다.

<script>
jQuery(function($){
$(' #tiles li').wookmark();
});
</script>

복잡한 사용법:

코드 복사 코드는 다음과 같습니다.

<script>
jQuery(function($){
$('#tiles li').wookmark({ //폭포 흐름 레이아웃을 구현하는 객체입니다
autoResize: true, //창 크기가 변경되면 레이아웃이 다시 레이아웃됨을 나타내려면 true로 설정합니다.
컨테이너: $('#container' ), //이것은 컨테이너의 이름입니다. 이 컨테이너에는 CSS 속성 "position:relative"가 포함되어야 합니다. 그렇지 않으면 모든 것이 페이지의 왼쪽 상단에 압착되는 것을 볼 수 있습니다.
offset: 12, // 인접한 두 요소 사이의 거리
itemWidth: 222, //지정된 객체의 너비
resizeDelay: 50 / /기본값은 50입니다
});
}) ;
</script>

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( 옵션);
});