当前时间:Friday 2016年12月09日 欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

当前位置: 首页 >> HTML5,javascript,phonegap开发 >> 正文

phonegap-手机瀑布流的实现及动态分页加载

手机瀑布流

先看看图

点击查看原图

 

相对于电脑网页版瀑布流功能,手机版的不同在于手机屏幕较小,基本只能在水平方向排两列!同时,网页版多使用绝对定位来计算各个图片块的位置,使用的是px为单位!

在手机端如果考虑到手机分辨率兼容性的问题,则需要用em做单位,显然在绝对定位时会有麻烦,因为js获取的都是px单位的值

基于手机浏览的特性和局限,在此提供鄙人能想到的另外一种设计思路如下:

原理:

将屏幕划分为两栏,各占50%宽,那么在追加图片块时就不用考虑绝对定位的问题,直接在左右每个div里面追加图片块即可!然后在追加图片块时,首先获取左右两个div的高度,将最近一个图片块追加到高度小的那个即可!

 

注意点:

 

手机由于网络原因,图片可能不能很快打开,那么在获取两侧div高度的时候就会出现问题,比如一个很高的图片100px高,但是由于图片还没有加载出来,那么那个图片块可能就只有20px的高度;所以,需要解决的问题就是:在图片还没有加载出来时,依然需要把图片块的高度撑开,故而,建议在服务器端返回数据时,将图片的高度值也返回,将这个高度赋值给该图片外dom对象的min-height值,这样,在图片未加载出来时,高度就已经撑开了!

 

具体的来说:

html中:

<div id=”forum_list”>
<div class=”outDiv” id=”leftPic”>
</div>
<div class=”outDiv” id=”rightPic”>
</div>
</div>

 

而在js中:

if(leftHeight > rightHeight){
//如果右侧高度小,则追加到右侧
var trHead = ‘<div class=”blockRight” onclick=”goThreadWindow(‘+item.tid+’)”>’;
var trPic = ‘<img style=”min-height:’+item.picHeight+’em” src=”‘+thumb+'” id=”p’+item.tid+'”>’;
var trTitle = ‘<div class=”pictitle”><div class=”subject”>’+b64.decode(item.subject)+'</div>’;
var trAddinfo = ‘<div class=”addinfo”><div class=”author”>’+b64.decode(item.author)+'</div><div class=”view”>View(‘+item.views+’)</div> </div></div></div>’;
tr = trHead + trPic + trTitle + trAddinfo;
rightPicObj.append(tr);
}else{
//反之,如果右侧高度大,则追加到左侧
var trHead = ‘<div class=”blockLeft” onclick=”goThreadWindow(‘+item.tid+’)”>’;
var trPic = ‘<img style=”min-height:’+item.picHeight+’em” src=”‘+thumb+'” id=”p’+item.tid+'”>’;
var trTitle = ‘<div class=”pictitle”><div class=”subject”>’+b64.decode(item.subject)+'</div>’;
var trAddinfo = ‘<div class=”addinfo”><div class=”author”>’+b64.decode(item.author)+'</div><div class=”view”>View(‘+item.views+’)</div> </div></div></div>’;
tr = trHead + trPic + trTitle + trAddinfo;
leftPicObj.append(tr);
}.

左右div加载图片,通过判断图片的高度来决定。

具体的可以看后面的附件.

 

动态分页加载数据:

最简单的办法就是点击更多按钮来触发加载紧接的N条数据。

这里就需要服务器端的api来实现了。

在手机端js可以这样写。

var page = 1;

//首次加载数据

function getPicList(){
var url = apiHost + ‘&ac=pic’;
page = 1;
//uexWindow.toast(“1″,”5″,”数据加载中…”,”0″);
xmlHttp(url,showList);
}

 

/**
* 获取下一页数据
*/
function getMorePic(){
page = page + 1;
var url = apiHost + ‘&ac=pic&page=’+page;
$(“#nextpage”).text(“数据加载中……”);
xmlHttp(url,showMoreList);
}

所以的数据可以用append(tr);来添加到页面中。

demo:手机端瀑布流

作者:夜阑小雨
原文链接:phonegap-手机瀑布流的实现及动态分页加载
夜阑小雨版权所有,转载本网站文章时请保留此信息。

收藏和分享: 转贴到开心网 转贴到校内网 分享到 Twitter Delicious 分享到 Google Reader 分享到 百度收藏 分享到 QQ收藏

评论信息

0 条评论 发表评论

发布评论

您必须登录才能发表评论。

网站客户端下载