소위 폭포 흐름 효과는 라이트 맵 베드 홈페이지 효과와 같습니다. 유사한 콘텐츠를 가진 여러 열이 밀접하게 배열되어 열 사이의 간격 (즉, 유체 레이아웃)을 최소화하려고합니다. 페이지 스크롤 막대 스크롤이 아래로 스크롤하면 모든 데이터가로드 될 때까지 (스크롤 트리거 된 AJAX 페이지 턴) 새 데이터가 현재 페이지 끝에 추가됩니다.
폭포 흐름은 페이지 매김을 유발합니다
다음 예제를 모두 사용할 수는 없지만 여기서 아이디어에 대해 이야기하겠습니다.
1. 화면에 들어가면 내용이 비어 있는지 확인하십시오. 비어 있지 않으면 데이터 초기화를 시작하십시오.
2. 화면으로 끌어 당기면 데이터 하단과 화면 높이 + 스크롤 높이를 판단하십시오. 하단이 위의 두의 합보다 작 으면 인터페이스를 다시 요청합니다. 즉, 데이터를로드하십시오.
3. 데이터가 특정 수의 페이지를 초과하면로드하거나 페이징 형식으로 표시하는 것을 중지하고 컨텐츠를 표시하려면 클릭하십시오.
var intf_url = "http://vevb.com/intf"; var pathurl = "http://vevb.com/";var page = 1; var isloadrb = false; var ul_select = $ ( "#fanslist"); var btn_more = $ ( "#loading"); if (ul_select.length <1) return; var is_more = true; // cross-domain interface 함수 loadjs (src, 콜백) {var js = document.createelement ( 'script'); js.src = src; js.OnReadyStateChange = js.onload = function () {if (! js. readiptate || js. readystate == 'loaded'|| js. readyState == '완료') {if (콜백) {콜백 () || 콜백}; }}; $ ( "#loading"). html ( "loaded");}} // 인터페이스 함수 QueryIntf () {var url = page == 1? intf_url+". json": intf_url+"_ page"+page+". 로드*/함수 needtoloadrb () {var btn_top = btn_more.offset (). 상단; var window_height = $ (window) .height (); var scroll_top = $ (창) .scrolltop (); return btn_top <scroll_top+window_height? true : false;} $ (wind }위의 것은 드롭 다운 콘텐츠로 계속로드하는 비교적 간단한 아이디어 코드입니다.
JSON 형식은 비슷합니다 (동적 인터페이스 인 경우 콜백 함수를 사용할 수 있고 여기에 fill ()를 추가 할 필요가 없습니다).
채우기 ({ "팬": [{ "닉네임": "Cai Baojian", "웹 사이트": "Vevb.com", "Youzhi": "2.5", "Time": "3 분"}, { "닉네임": "Cai Baojian", "웹 사이트": "Vevb.com", "Youzhi": "2.", "3."3. 전 "}, {"닉네임 ":"Cai Baojian ","웹 사이트 ":"Vevb.com ","Youzhi ":"2.5 ","Time ":"3 분 전 "},"닉네임 ":"Cai Baojian ","우리는 ":"vevb.com ","Youzhi ":"2.5 ","3. "3. 전 "}, {"닉네임 ":"Cai Baojian ","웹 사이트 ":"Vevb.com ","Youzhi ":"2.5 ","time ":"3 분 "},"닉네임 ":"Cai Baojian ","웹 사이트 ":"vevb.com ","youzhi ":"2.5 " CKNAME ":"Cai Baojian ","웹 사이트 ":"Vevb.com ","Youzhi ":"2.5 ","Time ":"3 분 전 "}, {"닉네임 ":"Cai Baojian ","웹 사이트 ":"vevb.com ","Youzhi ":"2.5 ":"3 분 AGO "}],"pageCount ": 2,"pageno ": 1,"pagesize ": 10,"TotalSize ": 20});정적 인터페이스 콜백을 사용할 수 있습니다. 정적 처리를 통해 서버 압력이 크게 완화되고 컨텐츠 생성이 가속화되며 대규모 웹 사이트에 필요한 처리 방법입니다.
JQuery의 Ajax 메소드는이 페이지 매김을 구현하여 폭포 흐름을 유발합니다
1. Ajax를 통해 다음 페이지의 내용을 가져옵니다.
다음 HTML 구조를 사용하여 웹 페이지에서 탐색이 필요합니다. Next_Link는 다음 페이지의 URL입니다.
<div id = "page_nav"> <a href = "next_link"> 다음 페이지 </a> </div>
해당 CSS
#page_nav {clear : 둘 다; 텍스트 정렬 : 센터; }다음 코드는 Ajax를 통해 다음 페이지의 내용을 얻고 현재 컨텐츠의 끝에 추가하는 것입니다.
nexthref = $ ( "#next_page a"). attr ( "href"); // scroll bind scroll event $ (wind 페이지 링크가 비어 있다면 (nexthref! = undefined) {// ajax page turn $ .ajax ({url : $ ( "#page_nav a"). attr ( "href"), type : "post", success : function (data) .find (data) .find ( "#jumms .imgbox"). a "). attr ("href "); $ ("##page_nav a "). attr ("href ", nexthref); $ ("#thumbs "). append (result);}});} else {$ ("#page_nav "). remave ();}});2. 추가 컨텐츠의 유체 레이아웃
JQuery에 익숙한 어린이 신발은 JS가 Ajax를 통해 페이지에 삽입 된 요소에 대해 작동하지 않다는 것을 이해해야하지만 Live ()를 사용하는 것과 같이이 작업을 수행 할 필요는 없습니다. Masonry는 기본적으로 비슷한 처리를 만들었으므로 AJAX가 성공적으로 실행 된 후 Masonry () 메소드에서만 호출하면됩니다.
$ newElems = $ result; $ newElems.ImagesLoaded (function () {$ container.masonry ( '부록', $ newElems, true);});3. Ajax 페이지 회전 프로세스를 수정하십시오
위의 프로세스에는 이미 완전한 폭포 흐름 레이아웃이 있지만 페이지 회전 프로세스 중에는 프롬프트가 없으며 여러 사진을 삽입하면 사용자 경험에 직접 영향을 줄 수 있으므로 페이지 회전 프로세스에 약간의 수정이 필요합니다. 전체 코드는 다음과 같습니다.
여기에서 새 컨텐츠가로드되거나 프롬프트가 마지막 페이지에 도달하도록 프롬프트를 위해 요소를 다음과 같이 추가해야합니다.
<div id = "page_loading"> <span> 전원 로딩 ... </span> </div>
해당 CSS
코드 사본은 다음과 같습니다.
#page_loading {display : 없음; 배경 : #111111; 불투명도 : 0.7; 높이 : 60px; 너비 : 220px; 패딩 : 10px; 위치 : 절대; 하단 : -50px; 왼쪽 : 330px; }
아래는 전체 Ajax 페이지 회전 코드입니다
nexthref = $ ( "#next_page a"). attr ( "href"); // scroll bind scroll event $ (wind 페이지 링크가 비어 있다면 (nexthref! = undefined) {//로드 모듈 표시 $ ( "#page_loading"). show ( "slow"); .imgbox "); nexthref = $ (data) .find ("#page_nav a "). attr ("href "); $ ("#page_nav a "). att ("#href ", nexthref); $ ("#thumbs "); Append (결과); transparent $ newLems (result) $ newElems.Imagesloaded (function () {$ container.masonry ( 'Appled', $ newElems, true); // 진행중인 새로운 내용 표시 $ newElems.animate ({불투명도 : 1}); page! "); $ ("#page_loading "). show ("fast "); settimeout ("$ ( '##page_loading'). hide () ", 1000); settimeout ("$ ( '##page_loading'). remove () ", 1100);}}});