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);
}