【原创】waterfall瀑布流网页实现的设计方案二:KISSY
程序员文章站
2022-06-12 17:59:14
...
waterfall瀑布流网页实现的设计方案二:KISSY 上一篇介绍了waterfall的设计方案一:Masonry,有需要的请点此查阅. 需求:瀑布流输出,loading 5 次后出现分页,每次loading 12个内容。 jquery虽然不是必须的,但是为了方便,我们还是用上jquery吧。 html+js
waterfall瀑布流网页实现的设计方案二:KISSY
上一篇介绍了waterfall的设计方案一:Masonry,有需要的请点此查阅.
需求:瀑布流输出,loading 5 次后出现分页,每次loading 12个内容。
jquery虽然不是必须的,但是为了方便,我们还是用上jquery吧。
html+js代码:
.... ... ... loading... {desc} KISSY.use("waterfall,ajax,node,button", function(S, Waterfall, IO, Node, Button) { //loading 5 次,出现分页! var loading_times = 5; var $ = Node.all; //每次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-{$catid}-{$page}-'+nextpage+'-'+per_count+'.html', dataType: "html", success: function(d) { //将json字符串变成 json格式数据 var d =(new Function("","return "+d))(); // 如果数据错误, 则立即结束 if (d.stat !== 'ok') { alert('load data error!'); end(); return; } // 拼装每页数据 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)); // 如果到最后一页了, 也结束加载 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 = $(window).height(); (st > 188) ? $backEle.show() : $backEle.hide(); if (!window.XMLHttpRequest) { $backEle.css("top", st + winH - 166); } } $(window).bind("scroll.backToTop", $backTOfuc); $(function () { $backTOfuc(); }); })(window.jQuery)
二、php端代码:
lists-ajax-{$catid}-{$page}-’+nextpage+’-’+per_count+’.html
四个参数分别对应:$_GET['catid'],$_GET['page'],$_GET['sub_page'],$_GET['per_page']
... ... //loading 5 次,出现分页! $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']['pages']=$datas['total_pages']; $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;
全文完。
原文地址:【原创】waterfall瀑布流网页实现的设计方案二:KISSY, 感谢原作者分享。
上一篇: 微信OAuth2.0网页受权php示例
下一篇: 最全防止sql注入方法