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 相关文章推荐
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
jquery插件validate验证的小例子
May 08 Javascript
jQuery cdn使用介绍
May 08 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
javascript如何定义对象数组
Jun 07 Javascript
JavaScript的==运算详解
Jul 20 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
swiperjs实现导航与tab页的联动
Dec 13 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 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
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
js资料prototype 属性
2007/03/13 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
python中PyQuery库用法分享
2021/01/15 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
python re模块和正则表达式
2021/03/24 Python
大一学生假期实习的自我评价
2013/10/12 职场文书
项目考察欢迎辞
2014/01/17 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
期终自我鉴定
2014/02/17 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers