【原创】waterfall瀑布流网页实现的设计方案二：KISSY

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, 感谢原作者分享。