瀑布流源码
2015-05-30 03:37
316 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>瀑布流以及回顶部的效果</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
h1{
text-align:center;
height:100px;
}
body{
background-color:RGB(232,231,226);
}
.all{
margin:0 auto;
width:1000px;
}
.number{
float:left;
width:225px;
}
.content
{
margin:5px;
background-color:white;
}
img{
margin:5px;
}
.loading{
position: absolute;
width:100%;
height:40px;
display:none;
text-align:center;
background-color:RGB(189,203,207);
}
#toTop
{
position:fixed;
_position:fixed;
font-size:12px;
color:Blue;
width:15px;
text-align:center;
right:300px;
bottom:100px;
cursor:pointer;
background-color:RGB(243,247,251);
display:none;
}
</style>
<script type="text/javascript">
window.onload = function () {
//初始参数
var reset = 0; //某些滚动条会触发三次scroll事件 用这个解决
var surplusHeight = 800; //差值
var imgWidth = "206px"; //img的宽度
var imgHeight = 0; //img的高度
var textHeight = 0; //文字高度
var showTopButtonHeight = 500;//回到顶部按钮的距离
var bigDivCount = 4;
var div1 = $("one");
var div2 = $("two");
var div3 = $("three");
var div4 = $("four");
var loading = $("loading");
var toTop = $("toTop");
//得到浏览器的名称
var browser = getBrowser();
//数据源
var imgArray = []; //img数组 也就是数据来源
var textArray = []; //img底下的文字和img对应
textArray[0] = "小花美女";
textArray[1] = "小花美女小花美女";
textArray[2] = "小花美女小花美女小花美女";
textArray[3] = "小花美女小花美女小花美女小花美女";
textArray[4] = "小花美女 小花美女";
textArray[5] = "小花美女小花小花美女";
textArray[6] = "小花美女";
textArray[7] = "小花美女小花美女";
textArray[8] = "小花美女小花美女小花美女";
textArray[9] = "小花美女小花美女小花美女小花美女小花美女";
textArray[10] = "小花美女小花美女小花美女小花美女小花美女";
textArray[11] = "小花美女小花美女小花美女小花美女小花美女小花美女";
textArray[12] = "小花美女小花美女小花美女小花美女小花美女小花美女小花美女";
textArray[13] = "小花美女小花美女小花美女小花美女小花美女小花美女小花美女小花美女";
textArray[14] = "小花美女小花美女小花美女小花美女小花美女小花美女小花美女小花美女";
textArray[15] = "小花美女小花美女小花美女小花美女小花美女小花美女小花美女小花美女";
imgArray[0] = "http://files.jb51.net/file_images/article/201211/960bda11tw1dnw504ga3vj.jpg";
imgArray[1] = "http://files.jb51.net/file_images/article/201211/771f735ctw1dnw5gv6dmcj.jpg";
imgArray[2] = "http://files.jb51.net/file_images/article/201211/5d5e9605gw1dnw4o6uk3gj.jpg";
imgArray[3] = "http://files.jb51.net/file_images/article/201211/6d9cb0b8jw1dnw5m0y5yrj.jpg";
imgArray[4] = "http://files.jb51.net/file_images/article/201211/62dae985gw1dnzc4mwvm5j.jpg";
imgArray[5] = "http://files.jb51.net/file_images/article/201211/8d95fb4cgw1dnzec2c6cdj.jpg";
imgArray[6] = "http://files.jb51.net/file_images/article/201211/872bccc8jw1dnzch2aqtkj.jpg";
imgArray[7] = "http://files.jb51.net/file_images/article/201211/5b104465tw1dnzdlozp6tj.jpg";
imgArray[8] = "http://files.jb51.net/file_images/article/201211/6de170f6jw1dnzl7jbzidj.jpg";
imgArray[9] = "http://files.jb51.net/file_images/article/201211/6a93dbfbgw1dnzeiu1draj.jpg";
imgArray[10] = "http://files.jb51.net/file_images/article/201211/6ea59a74jw1dnzm0wbf7vj.jpg";
imgArray[11] = "http://files.jb51.net/file_images/article/201211/48bf076ejw1dnzexjhl6dj.jpg";
imgArray[12] = "http://files.jb51.net/file_images/article/201211/6da7993fjw1dnvsnesrutj.jpg";
imgArray[13] = "http://files.jb51.net/file_images/article/201211/75914d3fgw1dnzlgn33njj.jpg";
imgArray[14] = "http://files.jb51.net/file_images/article/201211/6a8dea72gw1dnzlwnfju0j.jpg";
imgArray[15] = "http://files.jb51.net/file_images/article/201211/696387aagw1dnzqd829yyj.jpg";
//初始化
loadImg();
//主会场
window.onscroll = fun_scroll;
//滚动方法
function fun_scroll() {
//body的高度
var topAll = (browser == "Firefox") ? document.documentElement.scrollHeight : document.body.scrollHeight;
//卷上去的高度
var top_top = document.body.scrollTop || document.documentElement.scrollTop;
//回到顶部按钮操作
if (top_top > showTopButtonHeight)
toTop.style.display = "block";
else
toTop.style.display = "none";
//控制滚动条次数以及判断是否到达底部
if (reset == 0) {
var topAll = (browser == "Firefox") ? document.documentElement.scrollHeight : document.body.scrollHeight; //body的高度
var top_top = document.body.scrollTop || document.documentElement.scrollTop; //卷上去的高度
var result = topAll - top_top;
if (result < surplusHeight) {
setTimeout(loadImg, 1000);
reset = 1;
}
} else {
setTimeout(function () { reset = 0; }, 1000);
}
}
//加载图片
function loadImg() {
loading.style.display = "none";
for (var i = 0; i < bigDivCount; i++) {
div1.appendChild(addDiv());
div2.appendChild(addDiv());
div3.appendChild(addDiv());
div4.appendChild(addDiv());
}
setTimeout(function () {
var hh = (browser == "Firefox") ? document.documentElement.scrollHeight : document.body.scrollHeight;
loading.style.top = hh + "px";
loading.style.display = "block";
}, 1000);
}
//声明一个包含img和title的div
function addDiv() {
//数组下标的随机值
var ran = Math.round(Math.random() * (imgArray.length - 1));
//title层
var small_div = document.createElement("div");
small_div.innerHTML = textArray[ran];
//内部img
var img = document.createElement("img");
img.alt = "";
img.src = imgArray[ran];
img.style.width = imgWidth;
//包含img的层
var div = document.createElement("div");
div.className = "content";
div.appendChild(img);
div.appendChild(small_div);
return div;
}
//通过id得到对象
function $(id) {
return document.getElementById(id);
}
//得到浏览器的名称
function getBrowser() {
var OsObject = "";
if (navigator.userAgent.indexOf("MSIE") > 0) {
return "MSIE";
}
if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
return "Firefox";
}
if (isSafari = navigator.userAgent.indexOf("Safari") > 0) {
return "Safari";
}
if (isCamino = navigator.userAgent.indexOf("Camino") > 0) {
return "Camino";
}
if (isMozilla = navigator.userAgent.indexOf("Gecko/") > 0) {
return "Gecko";
}
}
//回到顶部
toTop.onclick = function () {
var count = 500; //每次的距离
var speed = 200; //速度
var timer = setInterval(function () {
var top_top = document.body.scrollTop || document.documentElement.scrollTop;
var tt = top_top - count;
tt = (tt < 300) ? 0 : tt;
if (top_top > 0)
window.scrollTo(tt, tt);
else
clearInterval(timer);
}, speed)
};
}
</script>
</head>
<body>
<h1 id="h1">I like TRY</h1>
<div id="all" class="all">
<div id="one" class="number">
</div>
<div id="two" class="number">
</div>
<div id="three" class="number">
</div>
<div id="four" class="number">
</div>
</div>
<div id="loading" class="loading">
<img src="http://files.jb51.net/file_images/article/201211/200803131036175436.gif" />
</div>
<div id="toTop"><span>△回顶部</span></div>
</body>
</html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>瀑布流以及回顶部的效果</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
h1{
text-align:center;
height:100px;
}
body{
background-color:RGB(232,231,226);
}
.all{
margin:0 auto;
width:1000px;
}
.number{
float:left;
width:225px;
}
.content
{
margin:5px;
background-color:white;
}
img{
margin:5px;
}
.loading{
position: absolute;
width:100%;
height:40px;
display:none;
text-align:center;
background-color:RGB(189,203,207);
}
#toTop
{
position:fixed;
_position:fixed;
font-size:12px;
color:Blue;
width:15px;
text-align:center;
right:300px;
bottom:100px;
cursor:pointer;
background-color:RGB(243,247,251);
display:none;
}
</style>
<script type="text/javascript">
window.onload = function () {
//初始参数
var reset = 0; //某些滚动条会触发三次scroll事件 用这个解决
var surplusHeight = 800; //差值
var imgWidth = "206px"; //img的宽度
var imgHeight = 0; //img的高度
var textHeight = 0; //文字高度
var showTopButtonHeight = 500;//回到顶部按钮的距离
var bigDivCount = 4;
var div1 = $("one");
var div2 = $("two");
var div3 = $("three");
var div4 = $("four");
var loading = $("loading");
var toTop = $("toTop");
//得到浏览器的名称
var browser = getBrowser();
//数据源
var imgArray = []; //img数组 也就是数据来源
var textArray = []; //img底下的文字和img对应
textArray[0] = "小花美女";
textArray[1] = "小花美女小花美女";
textArray[2] = "小花美女小花美女小花美女";
textArray[3] = "小花美女小花美女小花美女小花美女";
textArray[4] = "小花美女 小花美女";
textArray[5] = "小花美女小花小花美女";
textArray[6] = "小花美女";
textArray[7] = "小花美女小花美女";
textArray[8] = "小花美女小花美女小花美女";
textArray[9] = "小花美女小花美女小花美女小花美女小花美女";
textArray[10] = "小花美女小花美女小花美女小花美女小花美女";
textArray[11] = "小花美女小花美女小花美女小花美女小花美女小花美女";
textArray[12] = "小花美女小花美女小花美女小花美女小花美女小花美女小花美女";
textArray[13] = "小花美女小花美女小花美女小花美女小花美女小花美女小花美女小花美女";
textArray[14] = "小花美女小花美女小花美女小花美女小花美女小花美女小花美女小花美女";
textArray[15] = "小花美女小花美女小花美女小花美女小花美女小花美女小花美女小花美女";
imgArray[0] = "http://files.jb51.net/file_images/article/201211/960bda11tw1dnw504ga3vj.jpg";
imgArray[1] = "http://files.jb51.net/file_images/article/201211/771f735ctw1dnw5gv6dmcj.jpg";
imgArray[2] = "http://files.jb51.net/file_images/article/201211/5d5e9605gw1dnw4o6uk3gj.jpg";
imgArray[3] = "http://files.jb51.net/file_images/article/201211/6d9cb0b8jw1dnw5m0y5yrj.jpg";
imgArray[4] = "http://files.jb51.net/file_images/article/201211/62dae985gw1dnzc4mwvm5j.jpg";
imgArray[5] = "http://files.jb51.net/file_images/article/201211/8d95fb4cgw1dnzec2c6cdj.jpg";
imgArray[6] = "http://files.jb51.net/file_images/article/201211/872bccc8jw1dnzch2aqtkj.jpg";
imgArray[7] = "http://files.jb51.net/file_images/article/201211/5b104465tw1dnzdlozp6tj.jpg";
imgArray[8] = "http://files.jb51.net/file_images/article/201211/6de170f6jw1dnzl7jbzidj.jpg";
imgArray[9] = "http://files.jb51.net/file_images/article/201211/6a93dbfbgw1dnzeiu1draj.jpg";
imgArray[10] = "http://files.jb51.net/file_images/article/201211/6ea59a74jw1dnzm0wbf7vj.jpg";
imgArray[11] = "http://files.jb51.net/file_images/article/201211/48bf076ejw1dnzexjhl6dj.jpg";
imgArray[12] = "http://files.jb51.net/file_images/article/201211/6da7993fjw1dnvsnesrutj.jpg";
imgArray[13] = "http://files.jb51.net/file_images/article/201211/75914d3fgw1dnzlgn33njj.jpg";
imgArray[14] = "http://files.jb51.net/file_images/article/201211/6a8dea72gw1dnzlwnfju0j.jpg";
imgArray[15] = "http://files.jb51.net/file_images/article/201211/696387aagw1dnzqd829yyj.jpg";
//初始化
loadImg();
//主会场
window.onscroll = fun_scroll;
//滚动方法
function fun_scroll() {
//body的高度
var topAll = (browser == "Firefox") ? document.documentElement.scrollHeight : document.body.scrollHeight;
//卷上去的高度
var top_top = document.body.scrollTop || document.documentElement.scrollTop;
//回到顶部按钮操作
if (top_top > showTopButtonHeight)
toTop.style.display = "block";
else
toTop.style.display = "none";
//控制滚动条次数以及判断是否到达底部
if (reset == 0) {
var topAll = (browser == "Firefox") ? document.documentElement.scrollHeight : document.body.scrollHeight; //body的高度
var top_top = document.body.scrollTop || document.documentElement.scrollTop; //卷上去的高度
var result = topAll - top_top;
if (result < surplusHeight) {
setTimeout(loadImg, 1000);
reset = 1;
}
} else {
setTimeout(function () { reset = 0; }, 1000);
}
}
//加载图片
function loadImg() {
loading.style.display = "none";
for (var i = 0; i < bigDivCount; i++) {
div1.appendChild(addDiv());
div2.appendChild(addDiv());
div3.appendChild(addDiv());
div4.appendChild(addDiv());
}
setTimeout(function () {
var hh = (browser == "Firefox") ? document.documentElement.scrollHeight : document.body.scrollHeight;
loading.style.top = hh + "px";
loading.style.display = "block";
}, 1000);
}
//声明一个包含img和title的div
function addDiv() {
//数组下标的随机值
var ran = Math.round(Math.random() * (imgArray.length - 1));
//title层
var small_div = document.createElement("div");
small_div.innerHTML = textArray[ran];
//内部img
var img = document.createElement("img");
img.alt = "";
img.src = imgArray[ran];
img.style.width = imgWidth;
//包含img的层
var div = document.createElement("div");
div.className = "content";
div.appendChild(img);
div.appendChild(small_div);
return div;
}
//通过id得到对象
function $(id) {
return document.getElementById(id);
}
//得到浏览器的名称
function getBrowser() {
var OsObject = "";
if (navigator.userAgent.indexOf("MSIE") > 0) {
return "MSIE";
}
if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
return "Firefox";
}
if (isSafari = navigator.userAgent.indexOf("Safari") > 0) {
return "Safari";
}
if (isCamino = navigator.userAgent.indexOf("Camino") > 0) {
return "Camino";
}
if (isMozilla = navigator.userAgent.indexOf("Gecko/") > 0) {
return "Gecko";
}
}
//回到顶部
toTop.onclick = function () {
var count = 500; //每次的距离
var speed = 200; //速度
var timer = setInterval(function () {
var top_top = document.body.scrollTop || document.documentElement.scrollTop;
var tt = top_top - count;
tt = (tt < 300) ? 0 : tt;
if (top_top > 0)
window.scrollTo(tt, tt);
else
clearInterval(timer);
}, speed)
};
}
</script>
</head>
<body>
<h1 id="h1">I like TRY</h1>
<div id="all" class="all">
<div id="one" class="number">
</div>
<div id="two" class="number">
</div>
<div id="three" class="number">
</div>
<div id="four" class="number">
</div>
</div>
<div id="loading" class="loading">
<img src="http://files.jb51.net/file_images/article/201211/200803131036175436.gif" />
</div>
<div id="toTop"><span>△回顶部</span></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- WPA2-EAP
- 模拟 webbench 并发连接 测试网站 负载能力 《拿来主义》
- CUDA ---- GPU架构（Fermi、Kepler）
- js对象, 数组 , json 互相转换
- 5.29/C
- 《C++编程思想》 第一章 对象的演化
- DNS到底是干什么用的
- Eclipse快捷键指南
- hadoop实战–搭建eclipse开发环境及编写Hello World
- 编译hadoop eclipse的插件（hadoop1.0）
- 【leetcode】Unique Paths II
- XMPP协议分析-原理篇
- Ljava.lang.Object; cannot be cast to com.bdqn.hibernate.entity.*
- POJ 1018 解题报告
- 随笔动态生成
- Android-ADB命令常用方法
- Bash中的特殊字符
- KiCad中层定义
- leetcode#70 Climbing Stairs
- 解决Eclipse Android XML视图预览不了的问题