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


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

js实现的美女瀑布流效果代码的更多相关文章

利用JS实现简单的瀑布流效果
哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...
使用JS实现图片展示瀑布流效果
不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...
js 实现图片瀑布流效果，可更改配置参数带完整版解析代码[waterFall.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片瀑布流效果页面需求 1 ...
手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现什么是瀑布流效果首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
js图片瀑布流效果
要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...
JS 瀑布流效果
JS瀑布流效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
【前端】用jQuery实现瀑布流效果
jQuery实现瀑布流效果何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...
js实现图片的瀑布流
先看效果: 初始状态:
用jQuery实现瀑布流效果学习笔记
jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...

随机推荐

使用jave2将音频wav转换成mp3格式
最近需要用到语音合成功能,网上查阅了一番,发现可以使用腾讯云的语音合成API来完成这个功能,但是腾讯云的api返回的是wav格式的音频文件,这个格式的文件有些不通用,因此需要转换成mp3格式的文件. ...
Gym-101615C-Fear Factoring（数论）
分析题意是求 L - R之间的数的因数和我们知道如果对于一个数 i ( i < k = sqrt(R)),那么一定有一个数 R/i 也是R的因数遍历 i = 2 - k,然后对于每一个 i ...
DB2数据库在线备份还原
DB2在线备份设置方法: 第一步:开启归档日志 db2 update db cfg for TEST_DB using logretain on 第二步:重启数据库第三步:进行一次离线备份 db2 ...
Django框架基础知识05-自定义模板标签与过滤器
根据一定规则,自己定义出符合需求功能的.用在任何你有需求的地方,因为内置的满足不了我们的需求,不同的东西有不同的定义规则目前最最重要的就是HOW 一文件路径配置: templates 存放自定义 ...
python对象销毁(垃圾回收)
Python 使用了引用计数这一简单技术来跟踪和回收垃圾. 在 Python 内部记录着所有使用中的对象各有多少引用. 一个内部跟踪变量,称为一个引用计数器. 当对象被创建时, 就创建了一个引用计数, ...
Python中的函数（4）
一.传递列表你经常会发现,向函数传递列表很有用,这种列表包含的可能是名字.数字或者更复杂的对象(如字典). 将列表传递给函数后,函数就能直接访问其内容. 栗子:假设有一个用户列表,我们要和其中每一位 ...
pwntools使用简介3
连接本地process().远程remote().对于remote函数可以接url并且指定端口. IO模块下面给出了PwnTools中的主要IO函数.这个比较容易跟zio搞混,记住zio是read ...
MyBatis 3 分页
利用MyBatis 3进行分页,选定的数据库表c_province,有3列,id列,provinceid列,province列,用Oracle数据库.首先建立一个对应的实体类,Province有3个属 ...
Android TransitionDrawable：过渡动画Drawable
Android TransitionDrawable实现一种可以用动画表示的Drawable.写一个例子. package zhangphil.app; import android.graphics ...
日志不得应用情况切换强制standby改变状态为primary
日志不得应用情况切换备库为主库备库运行如下: alter database recover managed standby database disconnect from session; alt ...

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

js实现的美女瀑布流效果代码的更多相关文章

随机推荐

热门专题