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 相关文章推荐
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
微信小程序实现图片上传功能
May 28 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 Javascript
学前端,css与javascript重难点浅析
Jun 11 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数组的一些常见操作汇总
2011/07/17 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
ext 代码生成器
2009/08/07 Javascript
小议javascript 设计模式 推荐
2009/10/28 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
python删除特定文件的方法
2015/07/30 Python
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
python MySQLdb使用教程详解
2018/03/20 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
党员创先争优公开承诺书
2014/03/28 职场文书
人事任命书格式
2014/06/05 职场文书
2014年质量工作总结
2014/11/22 职场文书
大学生逃课检讨书
2015/05/04 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL