js原生瀑布流
背景：
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还是有优势的。
js原生瀑布流的更多相关文章
- 手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
- 原生JS实现瀑布流
浏览网页的时候经常会遇到瀑布流布局的网站.也许有些读者不了解瀑布流.瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数 ...
- 用js实现瀑布流的一种简单方法
现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...
- js实现瀑布流的一种简单方法实例分享
现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...
- [JS练习] 瀑布流照片墙
记录JS实现瀑布流照片墙效果 首先是前端页面 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- bootstrap+masonry.js写瀑布流
最近在用bootstrap写一个网站,其中有个图文展示的页面要用到瀑布流的效果.因为项目要求,项目要以bootstrap为基准,不准私自添加内联样式.内部样式,所以,自己写瀑布流就不行了,所以,根据要 ...
- 多栏布局与JS实现瀑布流
css3属性之多栏布局与JS实现瀑布流 背景:之前打算自己总结一下flex布局的知识点,发现自己无从下手,原因在何处:我反思了一下,其实原因很简单,使用的次数少,更多的时间使用了百分比,浮动和定位解决 ...
- js插件---瀑布流Masonry
js插件---瀑布流Masonry 一.总结 一句话总结:还是要去看官网,比amazeui上面介绍的详细很多 1.瀑布流的原理是什么? 给外层套好相对定位,里面的每一个弄好绝对定位,然后计算出每一个的 ...
- JavaScript——原生js实现瀑布流
瀑布流介绍及实现原理: 瀑布流是一种页面布局,页面上也有多等宽的块(块就页面内容),每一块都是绝对定位(absolute),每个块排列的方式如下:寻找现在高度最小的列,把该块定位到该列下方.需要知道, ...
随机推荐
- LeetCode Excel Sheet Column Title （输出excel表的列名称）
题意:给一个数字n,输出excel表的列名称. 思路:其实观察可知道,是个26进制的标记而已.那就模拟一下,每次计算一位时就先左移1位,再进行计算. class Solution { public: ...
- 【转】Android异步消息处理机制完全解析，带你从源码的角度彻底理解
原文网址:http://blog.csdn.net/guolin_blog/article/details/9991569 转载请注明出处:http://blog.csdn.net/guolin_bl ...
- ImageMagick的使用
关于ImageMagick ImageMagick (TM) 是一个免费的创建.编辑.合成图片的软件.它可以读取.转换.写入多种格式的图片.图片切割.颜色替换.各种效果的应用,图片的旋转.组合,文本, ...
- (转)INSTALLSHIELD 2010 预安装组件和软件
使用Installshield2010提供的组件 大家再开发软件产品的时候经常是基于某些软件和类库的,像我们的项目就用到了.Net Framework3.5,mapinfo,sqlserver 200 ...
- [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.4.6
Let $A$ and $B$ be two matrices (not necessarily of the same size). Relative to the lexicographicall ...
- HDU 5603 the soldier of love 离线+树状数组
这是bestcorder 67 div1 的1003 当时不会做 看了赛后官方题解,然后翻译了一下就过了,而且速度很快,膜拜官方题解.. 附上官方题解: the soldier of love 我们注 ...
- 移动端混合型App（hybrid app）自动化测试选型与实践
背景 公司产品的业务已经发展到了移动端,开发选型已经结束,决定使用phonegap做移动端的web应用开发平台.考虑到业务的复杂与多样,移动端的测试同样需要自动化.在网上看了很多,最终锁定了3个移动端 ...
- 转：maven项目添加jar包.
很多新手都不知道如何在maven项目里添加jar包. 以前我还没接触maven的时候下载过一个demo,是maven项目. 我居然是照着他的pom.xml文件一个一个的写!!! 很多人认为理所当然的东 ...
- 获取EntityFrameWork返回的错误和ModelState中的错误
都是通过循环才能找到具体的错误信息 具体方法参见这两篇文章: EntityFrameWork: http://www.cnblogs.com/shouzheng/archive/2012/04/19/ ...
- uva11426 GCD Extreme(II)
题意:求sum(gcd(i,j),1<=i<j<=n)1<n<4000001 思路: 1.建立递推关系,s(n)=s(n-1)+gcd(1,n)+gcd(2,n)+……+ ...