jquery简单瀑布流实现原理及ie8下测试代码


Posted in Javascript onJanuary 23, 2013

测试环境:ie8 ff13.0.1 chrome22
可以将分页获取的内容依次填入四个div中,瀑布流的分页可以以多页(比如5页)为单位二次分页,这样可以减少后台算法的复杂度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>waterfall flow</title> 
<script type="text/javascript" src="../jquery-1.8.0.min.js" /></script> 
<style type="text/css" > 
body{margin:0px;} 
#main{width:840px;margin:0 auto;} 
.flow{float:left;width:200px;margin:5px;background:#ABC;} 
</style> 
<script type="text/javascript" > 
$(document).ready(function(){ 
// 初始化内容 
for(var i = 0 ; i < 3 ; i++){ 
$(".flow").each(function(){ 
$(this).append("<div style=\"width:90%;height:"+getRandom(200,300)+"px;margin:5px auto;background:#159;\"></div>"); 
}); 
} $(window).scroll(function(){ 
// 被卷去的高度 
var scrollTop = document.body.scrollTop||document.documentElement.scrollTop; 
// 页面高度 
var pageHeight = $(document).height(); 
// 可视区域高度 
var viewHeight = $(window).height(); 
//alert(viewHeight); 
//当滚动到底部时 
if((scrollTop+viewHeight)>(pageHeight-20)){ 
if(scrollTop<1000){//防止无限制的增长 
for(var i = 0 ; i < 2 ; i++){ 
$(".flow").each(function(){ 
$(this).append("<div style=\"width:90%;height:"+getRandom(200,300)+"px;margin:5px auto;background:#159;\"></div>"); 
}); 
} 
} 
} 
}); 
}); 
/* 
* 获取指定范围随机数 
* @param min,最小取值 
* @param max,最大取值 
*/ 
function getRandom(min,max){ 
//x上限,y下限 
var x = max; 
var y = min; 
if(x<y){ 
x=min; 
y=max; 
} 
var rand = parseInt(Math.random() * (x - y + 1) + y); 
return rand; 
} 
</script> 
</head> 
<body> 
<div id="main"> 
<div class="flow" ></div> 
<div class="flow" ></div> 
<div class="flow" ></div> 
<div class="flow" ></div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
JavaScript中this详解
Sep 01 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
js本地图片预览实现代码
Oct 09 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 #Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 #Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 #Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 #Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 #Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 #Javascript
js jquery验证银行卡号信息正则学习
Jan 21 #Javascript
You might like
如何实现php图片等比例缩放
2015/07/28 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
[原创]图片分页查看
2006/08/28 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中的闭包实例详解
2014/08/29 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
如何卸载python插件
2020/07/08 Python
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
Java如何格式化日期
2012/08/07 面试题
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
研究生个人学年总结
2015/02/14 职场文书
2015年导购员工作总结
2015/04/25 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
《小小的船》教学反思
2016/02/18 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL