Так называемый эффект потока водопада похож на эффект домашней страницы легкой карты. Многочисленные столбцы с аналогичным содержанием расположены тесно, пытаясь свести к минимуму разрыв между столбцами (то есть с макетом жидкости). По мере того, как прокрутка страницы прокручивается вниз, новые данные будут добавлены к концу текущей страницы до тех пор, пока все данные не будут загружены (поворот на странице 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 = $ ("#загрузка"); if (ul_select.length <1) return; var is_more = true; // Функция интерфейса запроса поперечного домена (src, callback) {var js = document.createElement ('script'); js.src = src; js.onreadystateChange = js.onload = function () {if (! js.readystate || js.readystate == 'Loaded' || js.readyState == 'foot') {if (callback) {callback () || callback}; }}; js.charset = "utf-8"; document.getElementsbytagname ('head') [0] .appendchild (js);} // function function function function (data) {if (data.pagecount == data.pageno) {is_more = false; $ ("#загрузка"). html ("loaded");}} // Установить интерфейсную функцию queryintf () {var url = page == 1? Intf_url+". json": intf_url+"_ Page"+Page+". Json"; Loadjs (url, callback); загружен*/function undetoloadrb () {var btn_top = btn_more.offset (). top; var window_height = $ (window) .height (); var scroll_top = $ (window) .scrolltop (); return btn_top <scroll_top+window_height? True: false;} $ (window) .scroll (function () {var _needload = undyToloadrb (); if (_needload && isloadrb == false && is_more) {isloadrb = true; Queryintf ();}}}) window.onload = () () () () () quedload = () () () () () () () () () () () () () () () () () () () () () () () () () () () () () () () () () () () () () () () () () () () () () () () () () (); }Выше приведено относительно простой код идеи, который продолжает загрузку с раскрывающимся содержанием.
Формат JSON аналогичен (если это динамический интерфейс, вы можете использовать функцию обратного вызова, тогда вам не нужно добавлять fill () здесь):
Заполните ({«Поклонники»: [{«Низкий»: «Cai Baojian», «Веб -сайт»: «Vevb.com», «Youzhi»: «2,5», «Время»: «3 минуты назад»}, {«Прозвище»: «Cai Baojian», «Веб -сайт»: «Vevb.com», Youzhi »:« 2.5 »:« 2 »:« 2.5 »:« 2.5 »:« 2 »:« 2.5 »:« 2 ». назад "}, {" никнам ":" cai baojian "," Веб -сайт ":" vevb.com "," youzhi ":" 2.5 "," Time ":" 3 минуты назад "}, {" Nickname ":" Cai Baojian "," We Bsite ":" Vevb.com ", Youzhi": "2.5": "3": "3": "3": ":": ":": "3": "3": ":": ":" 3 минуты ":" 3 минуты ":" 3 минуты ":" 3 минуты ":" 3 минуты ":" 3 минуты ":" назад "}, {" никнам ":" cai baojian "," Веб -сайт ":" vevb.com "," youzhi ":" 2.5 "," Time ":" 3 минуты назад "}, {" никнам ":" Cai Baojian "," Веб -сайт ":" vevb.com "," youzhi ":" 2.5 ",", "3 минута", "3 минут". CKNAME ":" Cai Baojian "," Веб -сайт ":" vevb.com "," youzhi ":" 2.5 "," Time ":" 3 минуты назад "}, {" никнам ":" Cai Baojian "," Веб -сайт ":" vevb.com "," youzhi ":" 2.5 ",": "3 минуты": "vevb.com", "youzhi": "2.5", ":" 3 минуты ":" vevb.com "," youzhi ":" 2.5 ",": "3 минуты назад "}]," 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"); // Связанный прокрут Ссылка на страницу пуста if (nexthref! = undefined) {// ajax page turn $ .ajax ({url: $ ("#page_nav a"). attr ("href"), тип: "post", успех: function (data) {result = $ (data) .find ("#thumbs .imgbox"); nexthref = $ (data). a "). attr (" href "); $ ("#page_nav a "). attr (" href ", nexthref); $ ("#thumbs "). Append (result);}});} else {$ ("#page_nav "). remove ();}}});2. Жидкости с добавлением дополнительного контента
Детская обувь, знакомая с jQuery, должна понимать, что JS не работает для элементов, вставленных в страницу через Ajax, но это не нужно делать, например, использование Live (), потому что каменная кладка сделала аналогичную обработку внутри и по умолчанию, поэтому вам нужно только вызвать метод Masonry () в обратной функции после выполнения Ajax.
$ newelems = $ result; $ newelems.imagesloaded (function () {$ container.masonry ('adpended', $ newelems, true);});3. Измените процесс поворота страницы Ajax
В приведенном выше процессе уже существует полная компоновка потока водопада, но в процессе поворота страницы нет никаких запросов, и вставка нескольких изображений напрямую может повлиять на пользовательский опыт, поэтому необходимо внести некоторые изменения в процесс поворота страницы. Полный код приведен ниже.
Здесь вам необходимо добавить элемент следующим образом, чтобы вызвать загрузку нового контента или что подсказка достигла последней страницы.
<div id = "page_loading"> <pan> Загрузка питания ... </span> </div>
Соответствующий CSS
Кода -копия выглядит следующим образом:
#Page_Loading {Display: нет; Фон: #111111; непрозрачность: 0,7; Высота: 60px; Ширина: 220px; Заполнение: 10px; позиция: абсолютно; Внизу: -50px; Слева: 330px; }
Ниже приведен полный код поворота Ajax Page
nexthRef = $ ("#next_page a"). attr ("href"); // Связанный прокрут Ссылка на страницу пуста if (nexthref! = undefined) {// Показать модуль загрузки $ ("#page_loading"). Show ("Slow"); .imgbox "); nexthref = $ (data) .find ("#page_nav a "). attr (" href "); $ ("#page_nav a "). attr (" href ", nexthref); $ ("#thumbs "). Append (result); // Установите новый контент на Transparent $ newElmes = result ({{{result); // set Новый контент на Transparent $ newelmes = resulte ({{result); $ newelems.imagesdulted (function () {$ container.masonry ('Приложение', $ newelems, true); // Показать новое содержимое $ newelems.animate ({opacity: 1}); // скрыть модуль загрузки $ ("#page_loading"). Page! "); $ ("#page_loading "). Show (" Fast "); settimeout (" $ ('#page_loading'). hide () ", 1000); settimeout (" $ ('#page_loading'). remove () ", 1100);}}});