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代码.神奇的让我来把 ...

随机推荐

HTML基础（一）
什么是HTMLHTML Hypertext Markup Language:即超文本标记语言 HTML特点 1.HTML不需要编译,直接由浏览器执行 2.HTML文件是一个文本文件 3.HTML文件必 ...
《3+1团队》【Alpha】Scrum meeting 3
项目内容这个作业属于哪个课程任课教师博客主页链接这个作业的要求在哪里作业链接地址团队名称 3+1团队团队博客地址 https://home.cnblogs.com/u/3-1group ...
NOIp2018 提高组初赛试题参考答案
Floyd算法简单实现（C++）
图的最短路径问题主要包括三种算法: (1)Dijkstra (没有负权边的单源最短路径) (2)Floyed (多源最短路径) (3)Bellman (含有负权边的单源最短路径) 本文主要讲使用C++ ...
UART中RTS、CTS
RTS (Require ToSend,发送请求)为输出信号,用于指示本设备准备好可接收数据,低电平有效,低电平说明本设备可以接收数据. CTS (Clear ToSend,发送允许)为输入信号,用于 ...
configparser ，subprocess , xlrd ，xlwt 模块
一,configparser模块 ''' configparser模块: 是什么: 用于解析配置文件的模块配置文件的定义: 用于编写保存某个软件或某个系统的一系列参数的文件设置参数为什么需要配置 ...
ArrayList练习之存储字符串并遍历
在myArrayList项目下新建一个包在这个包中新建一个类:ArrayListDemo4.java ArrayListDemo4.java import java.util.ArrayList; ...
Python变量及数据类型
所有编程语言几乎都会有 ’ 变量‘ ,如 a = 2,用一个a变量指代数字2,在Python中,一切皆对象,因此在变量赋值的时候实际上是在内存中开辟了一块存储变量内容的内存空间对象. 对象可以指定不同 ...
XV6上下文切换
上下文切换分为两种情况用户程序陷入到内核,再从内核返回两个应用程序之间的上下文切换用户程序陷入到内核用户程序陷入到内核通过中断INT指令,在xv6中系统调用的号为64 操作系统在初始化的时候会 ...
[Istio]流量管理API v1alpha3路由规则
Istio提供一个API进行流量管理,该API允许用户将请求路由到特定版本的服务,为弹性测试注入延迟和失败,添加断路器等,所有这些功能都不必更改应用程序本身的代码.Istio 1.0中引入新的流量管理 ...

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

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

随机推荐

热门专题