正文

js实现的美女瀑布流效果代码

IP云
IP云V管理员/0 阅读
11/29
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

<!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:;

padding:;

}

h1{

text-align:center;

height:100px;

}

body{

background-color:RGB(,,);

}

.all{

margin: auto;

width:1000px;

}

.number{

float:left;

width:225px;

}

.content

{

margin:5px;

background-color:white;

}

img{

margin:5px;

}

.loading{

position: absolute;

width:%;

height:40px;

display:none;

text-align:center;

background-color:RGB(,,);

}

#toTop

{

position:fixed;

_position:fixed;

font-size:12px;

color:Blue;

width:15px;

text-align:center;

right:300px;

bottom:100px;

cursor:pointer;

background-color:RGB(,,);

display:none;

}

</style>

<script type="text/javascript">

window.onload = function () {

//初始参数

var reset = ; //某些滚动条会触发三次scroll事件 用这个解决

var surplusHeight = ; //差值

var imgWidth = "206px"; //img的宽度

var imgHeight = ; //img的高度

var textHeight = ; //文字高度

var showTopButtonHeight = ;//回到顶部按钮的距离

var bigDivCount = ;

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[] = "小花美女";

textArray[] = "小花美女小花美女";

textArray[] = "小花美女小花美女小花美女";

textArray[] = "小花美女小花美女小花美女小花美女";

textArray[] = "小花美女 小花美女";

textArray[] = "小花美女小花小花美女";

textArray[] = "小花美女";

textArray[] = "小花美女小花美女";

textArray[] = "小花美女小花美女小花美女";

textArray[] = "小花美女小花美女小花美女小花美女小花美女";

textArray[] = "小花美女小花美女小花美女小花美女小花美女";

textArray[] = "小花美女小花美女小花美女小花美女小花美女小花美女";

textArray[] = "小花美女小花美女小花美女小花美女小花美女小花美女小花美女";

textArray[] = "小花美女小花美女小花美女小花美女小花美女小花美女小花美女小花美女";

textArray[] = "小花美女小花美女小花美女小花美女小花美女小花美女小花美女小花美女";

textArray[] = "小花美女小花美女小花美女小花美女小花美女小花美女小花美女小花美女";

imgArray[] = "http://files.jb51.net/file_images/article/201211/960bda11tw1dnw504ga3vj.jpg";

imgArray[] = "http://files.jb51.net/file_images/article/201211/771f735ctw1dnw5gv6dmcj.jpg";

imgArray[] = "http://files.jb51.net/file_images/article/201211/5d5e9605gw1dnw4o6uk3gj.jpg";

imgArray[] = "http://files.jb51.net/file_images/article/201211/6d9cb0b8jw1dnw5m0y5yrj.jpg";

imgArray[] = "http://files.jb51.net/file_images/article/201211/62dae985gw1dnzc4mwvm5j.jpg";

imgArray[] = "http://files.jb51.net/file_images/article/201211/8d95fb4cgw1dnzec2c6cdj.jpg";

imgArray[] = "http://files.jb51.net/file_images/article/201211/872bccc8jw1dnzch2aqtkj.jpg";

imgArray[] = "http://files.jb51.net/file_images/article/201211/5b104465tw1dnzdlozp6tj.jpg";

imgArray[] = "http://files.jb51.net/file_images/article/201211/6de170f6jw1dnzl7jbzidj.jpg";

imgArray[] = "http://files.jb51.net/file_images/article/201211/6a93dbfbgw1dnzeiu1draj.jpg";

imgArray[] = "http://files.jb51.net/file_images/article/201211/6ea59a74jw1dnzm0wbf7vj.jpg";

imgArray[] = "http://files.jb51.net/file_images/article/201211/48bf076ejw1dnzexjhl6dj.jpg";

imgArray[] = "http://files.jb51.net/file_images/article/201211/6da7993fjw1dnvsnesrutj.jpg";

imgArray[] = "http://files.jb51.net/file_images/article/201211/75914d3fgw1dnzlgn33njj.jpg";

imgArray[] = "http://files.jb51.net/file_images/article/201211/6a8dea72gw1dnzlwnfju0j.jpg";

imgArray[] = "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 == ) {

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, );

reset = ;

}

} else {

setTimeout(function () { reset = ; }, );

}

}

//加载图片

function loadImg() {

loading.style.display = "none";

for (var i = ; 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";

}, );

}

//声明一个包含img和title的div

function addDiv() {

//数组下标的随机值

var ran = Math.round(Math.random() * (imgArray.length - ));

//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") > ) {

return "MSIE";

}

if (isFirefox = navigator.userAgent.indexOf("Firefox") > ) {

return "Firefox";

}

if (isSafari = navigator.userAgent.indexOf("Safari") > ) {

return "Safari";

}

if (isCamino = navigator.userAgent.indexOf("Camino") > ) {

return "Camino";

}

if (isMozilla = navigator.userAgent.indexOf("Gecko/") > ) {

return "Gecko";

}

}

//回到顶部

toTop.onclick = function () {

var count = ; //每次的距离

var speed = ; //速度

var timer = setInterval(function () {

var top_top = document.body.scrollTop || document.documentElement.scrollTop;

var tt = top_top - count;

tt = (tt < ) ?  : tt;

if (top_top > )

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>

http://www.jb51.net/article/31858.htm

相关阅读

目录[+]