[Original] waterfall web page implementation design solution 2: KISSY

Waterfall web page implementation design scheme 2: KISSY the previous article introduced waterfall design scheme 1: Masonry. If you need it, click here for reference. requirement: waterfall stream output. After loading5 times, a page is displayed, with 12 pieces of content loadingeach time. Although jquery is not required, we should use jquery for convenience. Html + js

Waterfall web page implementation design scheme 2: KISSY the previous article introduced waterfall design scheme 1: Masonry. If you need it, click here for reference. requirement: waterfall stream output. After five loading times, a page is displayed. Each loading contains 12 contents. Although jquery is not required, we should use jquery for convenience. Html + js

Waterfall web page implementation design scheme 2: KISSY

The previous article introduced waterfall design scheme 1: Masonry. If you need it, click here for reference.

Requirement: waterfall stream output. After five loading times, a page is displayed. Each loading contains 12 contents.

Although jquery is not required, we should use jquery for convenience.

Html + js Code:

.......... Loading... {desc} KISSY. use ("waterfall, ajax, node, button", function (S, Waterfall, IO, Node, Button) {// loading five times, page appears! Var loading_times = 5; var $ = Node. all; // The number of records per loading var per_count = 12; var tpl = $ ("'{tpl'{.html (), nextpage = 1, waterfall = new Waterfall. loader ({container: "# ColumnContainer", load: function (success, end) {$ ('# loadingPins '). show (); new IO ({url: '/lists-ajax-w.catid=-{{page}-'{nextpage}'-'{per_count}'.html', ype: "html", success: function (d) {// convert the json string into json format data var d = (new Function ("", "Return" + d) (); // if the data is incorrect, end if (d. stat! = 'OK') {alert ('Load data error! '); End (); return;} // assemble the data of each page var items = []; S. each (d. photos. photo, function (item) {item. height = Math. round (Math. random () * (300-180) + 180); // fake height items. push (new S. node (S. substitute (tpl, item) ;}); success (items); var page_it = (d. photos. page)-(loading_times * ({$ page}-1); // if the last page is reached, load nextpage = page_it + 1; if (nextpage> loading_times) | (nextpage + (loading_times * ({$ page}-1)> = D. photos. pages) {if ($ ('. pager '). length = 0) {$ ('# wrapper '). append ("" + d. photos. pages_str + '') ;}end () ;}, complete: function () {$ ('# loadingPins '). hide () ;}}) ;}, minColCount: 2, colWidth: 228}) ;}); (function ($) {var $ backEle = $ ('. backToTop '); $ backEle. click (function () {$ ("html, body "). animate ({scrollTop: 0}, 120) ;}) $ backTOfuc = function () {var st = $ (document ). scrollTop (); var winH = $ (win Dow). height (); (st> 188 )? $ BackEle. show (): $ backEle. hide (); if (! Window. XMLHttpRequest) {export backele.css ("top", st + winH-166); }}$ (window ). bind ("scroll. backToTop ", $ backTOfuc); $ (function () {$ backTOfuc () ;}) ;}( window. jQuery)

Ii. php code:
Lists-ajax-w.catid=-{page}-'{nextpage}'-'{per_count}'.html
The four parameters correspond to: $ _ GET ['catid'], $ _ GET ['page'], $ _ GET ['sub _ page'], $ _ GET ['per _ page']

...... // Loading 5 times, pagination! $ Loading_times = 5; $ sub_page = (int) $ _ GET ['sub _ page']; $ page = (int) $ _ GET ['page']; if ($ page = 0) {$ page = 1 ;}$ sub_page = $ sub_page + ($ page-1) * $ loading_times; $ limit = (int) $ _ GET ['per _ page']; $ catids = implode (',', $ array_child); if ($ catids! = '') {$ Catids. = ','. $ catid;} else {$ catids = $ catid;} $ SQL = "... "; $ datas = getRowset ($ SQL, 'a. id asc ', $ sub_page, $ limit, 10, $ urlrule); $ result ['STAT'] =' OK '; $ result ['photos'] ['page'] = $ sub_page; $ result ['photos'] ['page'] = $ datas ['total _ page']; $ result ['photos'] ['perpage'] = $ limit; $ result ['photos'] ['Total'] = $ datas ['total _ count']; $ result ['photos'] ['photo '] = $ datas ['datas']; $ datas_tmp = getRowset ($ SQL, 'a. id asc ', $ page, $ limit * $ loading_times, 10, $ urlrule ); $ result ['photos'] ['pages _ str'] = $ datas_tmp ['pages _ str']; // $ jsonp_callback =$ _ GET ['json _ callback']; echo json_encode ($ result); die;

The full text is complete.

Original article address: [original] waterfall web page implementation design solution 2: KISSY, thanks to the original author for sharing.