背景：
1、在移动端开发，jq文件是显得非常庞大的，所以所有效果尽量用HTML5和原生js实现。
2、本次瀑布流是固定列数，采用非浮动的另外一种瀑布流思想实现的。
3、本次数据来源是json接口
4、考虑到一次性奖json加载到页面数据比较臃肿，所以本demo是当点击加载更多时再重新发出数据请求（非ajax）
先上完整demo代码
<!doctype HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta content="telephone=no" name="format-detection"/>
<meta id="twcClient" content="false" name="twcClient"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>瀑布流demo</title>
<style type="text/css">
html{padding:0px;margin:0px auto;-webkit-text-size-adjust:none;}
body{background:#FFF;padding:0px;margin:0px auto;font-size:15px;color:#333;font-family:Helvetica,Microsoft YaHei,Microsoft JhengHei;}
a{color:#333;text-decoration:none;}
a:visited{color:#333;}
ol,ul,li,dl,dd,dt{padding:0;margin:0;list-style:none;}
form,p{padding:0;margin:0;}
i,em{font-style:normal;}
textarea {resize:none}
img{border:none;}
.spanclass{display:none;}
.body{max-width:320px;margin:0 auto;overflow:hidden;background:#eee;} /*列表页图片*/
.waterFall {margin: 0 auto;text-align: center;width: 320px;}
.l-uPic{padding-top: 10px; width: 150px; display: inline-block; vertical-align: top}
.l-uPic li{border: 1px solid #c9c9c9;margin-bottom:10px; width: 147px; background: #fff}
.l-uPic li a{ display: block; position: relative;}
.l-uPic li img{ padding: 6px;background: #fff; vertical-align: top}
.l-uPic li span{ display: block; height: 28px; line-height: 28px; border-top: 1px dashed #d5d5d5; font-size: 16px; background: #f7f7f7; padding-left: 10px;}
.l-uPic li span em{ float: right; height: 14px; line-height: 14px; color: #fff; background: #cc6698; padding: 0 2px; font-size: 10px; margin-top: 7px; margin-right: -2px;}
.l-uPic li span em::before {border-width:7px; border-color:transparent #cc6698 transparent transparent; border-style: solid; width: 0; height: 0; content: ""; display: inline-block; margin-left: -16px; vertical-align: middle; margin-top: -1px;}
.l-uPic li .iType{ position: absolute; height: 15px; line-height: 15px; background: #090909; right: 6px; bottom: 35px; border-radius: 7px; color: #fff; font-size: 11px; padding: 0 6px;}
.l-uPic li .iTime{ color: #b3b3b3; text-align: right; display: block;font-size: 12px; padding:7px 3px 9px 0;}
.l-uPic li .iTit { display: block; font-size: 13px; padding: 0 3px 0 6px; line-height: 18px; text-align: left;}
.l-uPic li .iTit em{ color: #c69;}
.l-uPic li .iNews{ display: block; height: 17px; line-height: 17px; background: #3da7de; color: #fff; font-size: 12px; font-style: italic; width: 42px; text-align: center; margin: 4px 0 6px -5px;}
.l-uPic li .iNews:before{display:inline-block;content:"";position:absolute;top:-4px;left:-5px;border-style:solid;border-color:transparent transparent #2381b2 #2381b2;border-width:2px;-webkit-transform: rotate(-90deg);} /*查看更多*/
.btn-more{border:1px solid #d9d6d6;border-radius:5px;background:#F5F5F5;line-height:36px;margin:10px 7px;text-align:center;cursor:pointer;}
.btn-more a {display:block;height:36px;line-height:36px;color:#777;font-size: 14px;}
.btn-more a i{display:inline-block;width:0;height:0;border-width:6px;overflow:hidden;border-color:#777 transparent transparent;border-style:solid;vertical-align:middle;position:relative;top:2px;margin-left:5px;}
</style>
</head>
<body>
<div class="body"> <div id="JwaterFall" class="waterFall">
<ul class="l-uPic">
<li class="item">
<a href="#">
<i class="iNews">NEWS</i>
<i class="iTit"><em>[时装]</em><br/>解禁深海无人区！潜水 表误区大扫盲</i>
<i class="iTime">2013-08-07</i>
</a>
</li>
</ul>
<ul class="l-uPic">
<li class="item">
<a href="#">
<img src="http://dummyimage.com/135x135/ddd/79c" width="135" alt="">
</a>
</li>
</ul> </div>
<div class="btn-more" id="Jmore"><a>查看更多<i></i></a></div> </div> <script type="text/javascript">
// 获取字符实际长度
var jmz = {};
jmz.GetLength = function(str) {
return str.replace(/[^\x00-\xff]/g,"aa").length;
};
/**
* 图片头数据加载就绪事件 - 更快获取图片尺寸
* @version 2011.05.27
* @author TangBin
* @see http://www.planeart.cn/?p=1121
* @param {String} 图片路径
* @param {Function} 尺寸就绪
* @param {Function} 加载完毕 (可选)
* @param {Function} 加载错误 (可选)
* @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
alert('size ready: width=' + this.width + '; height=' + this.height);
});
*/
var imgReady = (function () {
var list = [], intervalId = null,
// 用来执行队列
tick = function () {
var i = 0;
for (; i < list.length; i++) {
list[i].end ? list.splice(i--, 1) : list[i]();
};
!list.length && stop();
}, // 停止所有定时器队列
stop = function () {
clearInterval(intervalId);
intervalId = null;
}; return function (url, ready, load, error) {
var onready, width, height, newWidth, newHeight,
img = new Image();
img.src = url;
// 如果图片被缓存，则直接返回缓存数据
if (img.complete) {
ready.call(img);
load && load.call(img);
return;
}; width = img.width;
height = img.height; // 加载错误后的事件
img.onerror = function () {
error && error.call(img);
onready.end = true;
img = img.onload = img.onerror = null;
}; // 图片尺寸就绪
onready = function () {
newWidth = img.width;
newHeight = img.height;
if (newWidth !== width || newHeight !== height ||
// 如果图片已经在其他地方加载可使用面积检测
newWidth * newHeight > 1024
) {
ready.call(img);
onready.end = true;
};
};
onready(); // 完全加载完毕的事件
img.onload = function () {
// onload在定时器时间差范围内可能比onready快
// 这里进行检查并保证onready优先执行
!onready.end && onready();
load && load.call(img);
// IE gif动画会循环执行onload，置空onload即可
img = img.onload = img.onerror = null;
}; // 加入队列中定期执行
if (!onready.end) {
list.push(onready);
// 无论何时只允许出现一个定时器，减少浏览器性能损耗
if (intervalId === null) intervalId = setInterval(tick, 40);
};
};
})(); var JwaterFall = document.getElementById('JwaterFall'),//外壳
Jmore = document.getElementById('Jmore'),//更多按钮
JwaterFallLeft = JwaterFall.getElementsByTagName('ul')[0],//左列
JwaterFallRight = JwaterFall.getElementsByTagName('ul')[1],//右列
pNo = 0,
oClick = false; //初始值
var waterFallData = {
index : 0,//全局加载个数
loopNum : 0,//每次加载个数
errorNum : 0,//每次加载错误个数
unloadNum : 0,//全局未加载个数
otherHeight : 18,//一行标题文字的高度
heightLeft : JwaterFallLeft.clientHeight,//左列高度
heightRight : JwaterFallRight.clientHeight,//右列高度
heightLeftJson : [],//左列json数组
heightRightJson : []//右列json数组
} function append (data,num,pageCount) {
function appendjson() {
//当加载个数完成时,插入每列对应元素,并清空
if (waterFallData.loopNum + waterFallData.errorNum +waterFallData.unloadNum == num) {
for (var i = 0 , len=waterFallData.heightLeftJson.length; i < len ; i++) {
JwaterFallLeft.appendChild(waterFallData.heightLeftJson[i]);
}
waterFallData.heightLeftJson = [];
for (var i = 0 , len=waterFallData.heightRightJson.length; i < len ; i++) {
JwaterFallRight.appendChild(waterFallData.heightRightJson[i]);
}
//加载成功 , 重置
waterFallData.loopNum = 0;
waterFallData.errorNum = 0;
waterFallData.heightRightJson = [];
if (pNo >= pageCount) {
Jmore.onclick = null;
Jmore.innerHTML = "没有啦！";
}else {
oClick = true;
Jmore.innerHTML = "<a>查看更多<i></i></a>";
}
}
} if (pNo > pageCount) {
waterFallData.unloadNum++;//未加载+1
appendjson();//当加载个数完成时,插入每列对应元素,并清空
Jmore.onclick = null;
Jmore.innerHTML = "没有啦！";
}else {
if(!data[waterFallData.index]){
waterFallData.index=0;
}
var jsonSrc = data[waterFallData.index].image,
jsonUrl = data[waterFallData.index].url,
jsonPubDate = data[waterFallData.index].pubDate,
jsonTitle = data[waterFallData.index].title,
jsonType = data[waterFallData.index].type,
jsonTitlen = jmz.GetLength(jsonTitle)+jmz.GetLength(jsonType); if(jsonType !=''){
jsonType = '<em>['+jsonType+']</em>';
jsonTitlen = jsonTitlen+2;
}
imgReady(jsonSrc, function () {
//图片尺寸加载完成时
//如果图片不为空
if (this.width != 0) {
//创建item
var liEle = document.createElement("li"); liEle.innerHTML = '<a href="' + jsonUrl + '"><img src="' + jsonSrc + '" width="135" /><i class="iTit">'+jsonType+jsonTitle+'</i><i class="iTime">'+jsonPubDate+'</i></a>';
//每次计算左右两列高度,并且插入相应的数组 if (waterFallData.heightLeft > waterFallData.heightRight) {
waterFallData.heightRightJson.push(liEle);
waterFallData.heightRight = waterFallData.heightRight + 135*this.height/this.width + waterFallData.otherHeight*Math.ceil(jsonTitlen/21); }else {
waterFallData.heightLeftJson.push(liEle);
waterFallData.heightLeft = waterFallData.heightLeft + 135*this.height/this.width + waterFallData.otherHeight*Math.ceil(jsonTitlen/21);
//alert("l:"+waterFallData.heightLeft)
}
}
waterFallData.loopNum++;
appendjson();//当加载个数完成时,插入每列对应元素,并清空
},function () {
//图片加载完成时
},function () {
//图片加载出错时
waterFallData.errorNum++;
}); waterFallData.index++;//全局+1
}
}; function callback(data) {
var articleList = data.articleList,
pageCount = data.pageCount-1,
leng=articleList.length; Jmore.innerHTML = "正在加载...";
for (var i = 0 , len=leng; i < len ; i++) {
append (articleList,leng,pageCount);
}
Jmore.onclick = function () {
if(oClick){
oClick = false;
this.innerHTML = "正在加载...";
pNo++;
getDetails(pNo);
}else{
Jmore.onclick = null;
} };
} function getScript(url) {
var scr = document.createElement('script');
scr.src = url;
scr.charset = "utf-8";
document.body.insertBefore(scr, document.body.firstChild);
} function getDetails(pNo) {
var url = "http://www.pclady.com.cn/3g/wap2013/intf/shouye/index_"+pNo+".html";
getScript(url);
} document.write("<script src=\"http://www.pclady.com.cn/3g/wap2013/intf/shouye/index.html\" charset=\"utf-8\"><\/script>")
</script> </body>
</html>
代码比较多点，但胜在是原生，比请求个jq还是有优势的。