Ajax ينفذ طريقة تدفق الشلال التي تؤدي إلى ترحيل وتوصل إلى تراجع تدفق الشلال

يشبه تأثير تدفق الشلال المزعوم تمامًا تأثير الصفحة الرئيسية لخريطة الضوء. يتم ترتيب أعمدة متعددة ذات محتوى مماثل عن كثب ، في محاولة لتقليل الفجوة بين الأعمدة (أي تخطيط السوائل). أثناء تمرير شريط التمرير للصفحة لأسفل ، ستتم إضافة بيانات جديدة إلى نهاية الصفحة الحالية حتى يتم تحميل جميع البيانات (دورة Ajax Page التي تم نقلها).

يؤدي تدفق الشلال إلى ترقيم الصفحات

اسمحوا لي أن أتحدث عن الفكرة هنا ، على الرغم من أنه لا يمكن استخدام الأمثلة التالية كل منها:

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 request request function loadjs (src ، callback) {var js = docet.createlement ('' script ') ؛ JS.SRC = SRC ؛ JS.OnReadyStateChange = JS.Onload = function () {if (! }} ؛ js.charset = "utf-8" ؛ document.getElementsByTagName ('head') [0] $ ("#loading"). html ("loaded") ؛}} // حل وظيفة الواجهة QueryIntf () {var url = page == 1؟ intf_url+". json": intf_url+"_ page+". تم تحميل*/وظيفة Needtoloadrb () {var btn_top = btn_more.offset (). top ؛ var window_height = $ (window). height () ؛ var scroll_top = $ (window) .scrolltop () ؛ إرجاع btn_top <scroll_top+window_height؟ صحيح: false ؛} $ (window) .scroll (function () {var _needload = needtoloadrb () ؛ if (_needload && ercloadrb == false && is_more) {asloadrb = true ؛ queryintf () ؛ }

ما سبق هو رمز فكرة بسيط نسبيًا يستمر في التحميل مع المحتوى المنسدل.

يشبه تنسيق JSON (إذا كانت واجهة ديناميكية ، يمكنك استخدام وظيفة رد الاتصال ، فأنت لا تحتاج إلى إضافة Fill () هنا):

 FILL ({"المشجعين": [{"لقب": "Cai Baojian" ، "موقع الويب": "Vevb.com" ، "Youzhi": "2.5" ، "Time": "3 Minutes"} ، {" منذ "} ، {" لقب ":" Cai Baojian "،" موقع الويب ":" Vevb.com "،" Youzhi ":" 2.5 "،" Time ":" 3 دقائق "، منذ "} ، {" لقب ":" Cai Baojian "،" الموقع الإلكتروني ": ckname ":" Cai Baojian "،" موقع الويب ":" Vevb.com "،" Youzhi ":" 2.5 "،" Time ":" 3 دقائق "} ، {" لقب ":" Cai Baojian "،" موقع VEVB.com "،" youzhi " "" ""}] ، "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> </viv>

CSS المقابلة

 #page_nav {clear: كلاهما ؛ محاذاة النص: المركز ؛ }

الكود التالي هو الحصول على محتوى الصفحة التالية من خلال AJAX وإلحاقه إلى نهاية المحتوى الحالي.

 nexthref = $ ("#next_page a"). attr ("href") ؛ // bind Scroll event $ (window) .bind ("scroll" ، function () {// حدد ما إذا كان شريط التمرير الخاص بالنافذة قريبًا من السفلي) هو فارغ إذا (nexthref! = undefined) {// ajax page turn $ .ajax ({url: $ ("#page_nav a"). attr ("href") ، النوع: a "). attr (" href ") ؛ $ ("#page_nav a "). attr (" href "، nexthref) ؛ $ ("#thumbs "). إلحاق (نتيجة) ؛}}) ؛} else {$ ("#page_nav "). إزالة () ؛}}}) ؛

2. تخطيط السوائل للمحتوى الإضافي

يجب أن يفهم أحذية الأطفال المطلعين على jQuery أن JS لا تعمل مع العناصر التي تم إدراجها في الصفحة من خلال Ajax ، ولكن ليست هناك حاجة للقيام بذلك ، مثل استخدام Live () ، لأن البناء جعلت معالجة مماثلة داخليًا وتعمل بشكل افتراضي ، لذلك تحتاج فقط إلى استدعاء طريقة البناء () في وظيفة Callback بعد تنفيذ Ajax.

 $ newelems = $ result ؛ $ newelems.ImagesLoaded (function () {$ container.masonry ('applended' ، $ newelems ، true) ؛}) ؛

3. قم بتعديل عملية تشغيل صفحة Ajax

يوجد بالفعل تخطيط كامل لتدفق الشلال في العملية أعلاه ، ولكن لا يوجد موجه أثناء عملية تحول الصفحة ، وقد يؤثر إدخال صور متعددة مباشرة على تجربة المستخدم ، لذلك هناك حاجة إلى إجراء بعض التعديلات لعملية تحول الصفحة. ويرد الرمز الكامل أدناه.

تحتاج هنا إلى إضافة عنصر على النحو التالي للمطالبة بتحميل المحتوى الجديد أو أن المطالبة قد وصلت إلى الصفحة الأخيرة.

 <div id = "page_loading"> <span> تحميل الطاقة ... </span> </viv>

CSS المقابلة

نسخة الكود كما يلي:

#page_loading {display: none ؛ الخلفية: #111111 ؛ العتامة: 0.7 ؛ الارتفاع: 60px ؛ العرض: 220 بكسل ؛ الحشو: 10 بكسل ؛ الموقف: مطلق ؛ أسفل: -50 بكسل ؛ اليسار: 330 بكسل ؛ }

فيما يلي رمز تشغيل صفحة Ajax الكامل

 nexthref = $ ("#next_page a"). attr ("href") ؛ // bind Scroll event $ (window) .bind ("scroll" ، function () {// حدد ما إذا كان شريط التمرير الخاص بالنافذة قريبًا من السفلي) فارغ إذا (nexthref! = غير محدد) {// إظهار وحدة التحميل $ ("#page_loading"). show ("Slow") ؛ nexthref = $ (data) .find ("#page_nav"). $ newelems.imagesed (function () {$ container.masonry ('Assidended' ، $ newelems ، true) ؛ الصفحة الأخيرة! ") ؛ $ ("#page_loading "). show (" fast ") ؛ setTimeout (" $ ('#page_loading'). Hide () ، 1000) ؛ setTimeOut ("$ ('#page_loading'). remove () ، 1100) ؛}}}) ؛