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 相关文章推荐
超级退弹代码
Jul 07 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
Dec 15 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
浅析node.js中close事件
Nov 26 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 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代码
2013/12/03 PHP
php以post形式发送xml的方法
2014/11/04 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
js轮播图代码分享
2016/07/14 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
python 切换root 执行命令的方法
2019/01/19 Python
函授药学自我鉴定
2014/02/07 职场文书
会计学习心得体会
2014/09/09 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
优秀员工事迹材料
2014/12/20 职场文书
护士先进个人总结
2015/02/13 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
蜗居观后感
2015/06/11 职场文书
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript
Python与C++中梯度方向直方图的实现
2022/03/17 Python
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫
使用python绘制横竖条形图
2022/04/21 Python