เอฟเฟกต์การไหลของน้ำตกที่เรียกว่าเป็นเช่นเดียวกับเอฟเฟกต์หน้าแรกของแผนที่ หลายคอลัมน์ที่มีเนื้อหาที่คล้ายกันถูกจัดเรียงอย่างใกล้ชิดพยายามลดช่องว่างระหว่างคอลัมน์ (เช่นเค้าโครงของเหลว) เมื่อแถบเลื่อนหน้าเลื่อนลงข้อมูลใหม่จะถูกเพิ่มในตอนท้ายของหน้าปัจจุบันจนกว่าข้อมูลทั้งหมดจะถูกโหลด
การไหลของน้ำตกทำให้เกิดการปนเปื้อน
ให้ฉันพูดถึงความคิดที่นี่แม้ว่าตัวอย่างต่อไปนี้ไม่สามารถใช้ทั้งหมดได้:
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"); ถ้า (ul_select.length <1) return; var is_more = true; // ฟังก์ชั่นอินเทอร์เฟซการร้องขอ cross-domain js.src = src; js.onreadyStateChange = js.onload = function () {ถ้า (! js.readyState || js.readyState == 'โหลด' || js.readyState == 'เสร็จสมบูรณ์') {ถ้า (โทรกลับ) {callback () || callback}; }}; js.charset = "utf-8"; document.getElementSbyTagname ('head') [0] .AppendChild (JS);} // ฟังก์ชั่นฟังก์ชั่นการเรียกกลับ (ข้อมูล) {ถ้า (data.pagecount == data.pageno) {is_more = เท็จ $ ("#loading"). html ("โหลด");}} // แก้ไขฟังก์ชั่นอินเตอร์เฟส queryintf () {var url = page == 1? intf_url+". json": intf_url+"หน้า" หน้า+" โหลด*/ฟังก์ชั่น needtoloadrb () {var btn_top = btn_more.offset (). ด้านบน; var window_height = $ (หน้าต่าง) .height (); var scroll_top = $ (หน้าต่าง) .scrolltop (); ส่งคืน btn_top <scroll_top+window_height? true: false;} $ (window) .scroll (function () {var _needload = needtoloadrb (); ถ้า (_needload && isloadrb == false && is_more) {isloadrb = true; queryintf () -ข้างต้นเป็นรหัสความคิดที่ค่อนข้างง่ายที่ยังคงโหลดด้วยเนื้อหาแบบเลื่อนลง
รูปแบบ JSON คล้ายกับ (ถ้าเป็นอินเทอร์เฟซแบบไดนามิกคุณสามารถใช้ฟังก์ชั่นการโทรกลับคุณไม่จำเป็นต้องเพิ่มการเติม () ที่นี่):
เติม ({"แฟน ๆ ": [{"ชื่อเล่น": "Cai Baojian", "เว็บไซต์": "vevb.com", "youzhi": "2.5", "เวลา": "3 นาทีที่ผ่านมา", {"ชื่อเล่น": "Cai Baojian" ที่ผ่านมา "}, {" ชื่อเล่น ":" Cai Baojian "," เว็บไซต์ ":" vevb.com "," youzhi ":" 2.5 "," เวลา ":" 3 นาทีที่ผ่านมา "}, {" ชื่อเล่น ":" Cai Baojian "," ที่ผ่านมา "}, {" ชื่อเล่น ":" Cai Baojian "," เว็บไซต์ ":" vevb.com "," youzhi ":" 2.5 "," เวลา ":" 3 นาทีที่ผ่านมา "}, {" ชื่อเล่น ": ckname ":" Cai Baojian "," เว็บไซต์ ":" vevb.com "," youzhi ":" 2.5 "," เวลา ":" 3 นาทีที่ผ่านมา "}, {" ชื่อเล่น ":" Cai Baojian "," เว็บไซต์ ":" Vevb.com "," Youzhi ":" 2.5 " ที่ผ่านมา "}]," pagecount ": 2," pageno ": 1," pagesize ": 10," totalsize ": 20});ปรากฎว่าสามารถใช้การเรียกกลับอินเทอร์เฟซแบบคงที่ ผ่านการประมวลผลแบบคงที่ความดันเซิร์ฟเวอร์จะบรรเทาลงอย่างมากและการสร้างเนื้อหาจะถูกเร่งและเป็นวิธีการประมวลผลที่จำเป็นสำหรับเว็บไซต์ขนาดใหญ่
วิธีการ AJAX ของ JQuery ใช้การปนเปื้อนทำให้เกิดการไหลของน้ำตก
1. รับเนื้อหาของหน้าถัดไปผ่าน AJAX
เราต้องการการนำทางในหน้าเว็บที่มีโครงสร้าง HTML ต่อไปนี้ Next_link เป็น URL ของหน้าถัดไป
<div id = "page_nav"> <a href = "next_link"> หน้าถัดไป </a> </div>
CSS ที่สอดคล้องกัน
#PAGE_NAV {เคลียร์: ทั้งสอง; TEXT-ALIGN: CENTER; -รหัสต่อไปนี้คือการรับเนื้อหาของหน้าถัดไปผ่าน AJAX และต่อท้ายเนื้อหาปัจจุบัน
nexthref = $ ("#next_page a"). attr ("href"); // bind arent event $ (หน้าต่าง). -bind ("scroll", function () {// ตรวจสอบว่าแถบเลื่อนของหน้าต่างอยู่ใกล้กับด้านล่างของหน้าหรือไม่ ลิงก์หน้าว่างถ้า (nexthref! = undefined) {// ajax หน้าเปิด $ .ajax ({url: $ ("#page_nav a"). attr ("href"), พิมพ์: "โพสต์", ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) {result = $ (data) .find a "). attr (" href "); $ ("#page_nav a "). attr (" href ", nexthref); $ ("#thumbs "). ผนวก (ผลลัพธ์);}});} else {$ ("#page_nav ")2. การจัดวางของเหลวของเนื้อหาเพิ่มเติม
รองเท้าเด็กที่คุ้นเคยกับ jQuery ควรเข้าใจว่า JS ไม่ทำงานสำหรับองค์ประกอบที่แทรกเข้าไปในหน้าผ่าน Ajax แต่ไม่จำเป็นต้องทำเช่นนี้เช่นการใช้ Live () เนื่องจากการก่ออิฐได้ทำการประมวลผลที่คล้ายกันภายในและทำงานตามค่าเริ่มต้นดังนั้นคุณต้องเรียกวิธีการ Masonry ()
$ newelems = $ result; $ newelems.imagesloaded (function () {$ container.masonry ('ผนวก', $ newelems, true);});3. แก้ไขกระบวนการพลิกหน้า AJAX
มีรูปแบบการไหลของน้ำตกที่สมบูรณ์ในกระบวนการข้างต้น แต่ไม่มีการแจ้งเตือนในระหว่างกระบวนการเปลี่ยนหน้าและการแทรกรูปภาพหลายภาพอาจส่งผลกระทบต่อประสบการณ์ของผู้ใช้โดยตรงดังนั้นจึงจำเป็นต้องมีการแก้ไขบางอย่างในกระบวนการเปลี่ยนหน้า รหัสที่สมบูรณ์ได้รับด้านล่าง
ที่นี่คุณต้องเพิ่มองค์ประกอบดังต่อไปนี้เพื่อแจ้งว่ามีการโหลดเนื้อหาใหม่หรือว่าพรอมต์มาถึงหน้าสุดท้ายแล้ว
<div id = "page_loading"> <span> การโหลดกำลัง ... </span> </div>
CSS ที่สอดคล้องกัน
การคัดลอกรหัสมีดังนี้:
#page_loading {display: none; ความเป็นมา: #111111; ความทึบ: 0.7; ความสูง: 60px; ความกว้าง: 220px; Padding: 10px; ตำแหน่ง: สัมบูรณ์; ด้านล่าง: -50px; ซ้าย: 330px; -
ด้านล่างนี้เป็นรหัสเปิดหน้า Ajax ที่สมบูรณ์
nexthref = $ ("#next_page a"). attr ("href"); // bind arent event $ (หน้าต่าง). -bind ("scroll", function () {// ตรวจสอบว่าแถบเลื่อนของหน้าต่างอยู่ใกล้กับด้านล่างของหน้าหรือไม่ ลิงก์หน้าว่างถ้า (nexthref! = undefined) {// แสดงโมดูลโหลด $ ("#page_loading") แสดง ("ช้า"); .imgbox "); nexthref = $ (data) .find ("#page_nav a "). attr (" href "); $ ("#page_nav a "). attr (" href ", nexthref); $ ("#thumbs ") $ newelems.imagesloaded (function () {$ container.masonry ('ผนวก', $ newelems, true); // แสดงเนื้อหาใหม่ที่กำลังดำเนินอยู่ $ newelems.animate ({opacity: 1}); หน้าสุดท้าย! "); $ ("#page_loading ") แสดง (" เร็ว "); settimeout (" $ ('#page_loading'). ซ่อน () ", 1000); settimeout (" $ ('#page_loading') ลบ () ", 1100);}}});