欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  php教程

【原创】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;

全文完。