플러그인 다운로드: https://github.com/GBKS/Wookmark-jQuery공식 홈페이지: http://www.wookmark.com/jquery-plugin 플러그인을 다운로드한 후 웹페이지에서 플러그인의 JS 파일을 참조하세요. 코드 복사 코드는 다음과 같습니다. </script> ;</div><BR>HTML 코드 구조: <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="3275" class="copybut" id="copybut3275" onclick="doCopy('code3275')"><U>코드 복사</U></a></span> 코드는 다음과 같습니다:</div><div class="codebody" id="code3275"><div id ="main"><br> <ul id="tiles"><br> <li><img src="images/1 .jpg"></li><br> <li><img src="images/2.jpg"></li><br> <li><img src="이미지 /3.jpg"></li><br> </ul><br></div></div> <br>간단한 사용법: html 파일에 코드 추가<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="81248" class="copybut" id="copybut81248" onclick="doCopy('code81248')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code81248"><script><br> jQuery(function($){<br> $(' #tiles li').wookmark();<br> });<br> 복잡한 사용법: 코드 복사 코드는 다음과 같습니다. <br>jQuery(function($){<br> $('#tiles li').wookmark({ //폭포 흐름 레이아웃을 구현하는 객체입니다<br> autoResize: true, //창 크기가 변경되면 레이아웃이 다시 레이아웃됨을 나타내려면 true로 설정합니다. <br> 컨테이너: $('#container' ), //이것은 컨테이너의 이름입니다. 이 컨테이너에는 CSS 속성 "position:relative"가 포함되어야 합니다. 그렇지 않으면 모든 것이 페이지의 왼쪽 상단에 압착되는 것을 볼 수 있습니다. <br> offset: 12, // 인접한 두 요소 사이의 거리 <br> itemWidth: 222, //지정된 객체의 너비 <br> resizeDelay: 50 / /기본값은 50입니다<br> });<br>}) ;<br> 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( 옵션);});
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
