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

随机推荐

sublime中使用markdown并实时编辑
1.需求想在sublime中编辑.md文件 2.步骤找到菜单栏: 快捷键,shift + command + p,选择 Package Control:Install Package, 没有找到P ...
复制webp图片到word || 微信webp图片不能复制 || 如何复制webp到word
用IE浏览器打开Alt+A 复制直接去word粘贴, 用IE浏览器打开Alt+A 复制直接去word粘贴用IE浏览器打开Alt+A 复制直接去word粘贴用IE浏览器打开Alt+A 复制直接去wo ...
visual studio中使用vim快捷键
vsvim下载链接: https://marketplace.visualstudio.com/items?itemName=JaredParMSFT.VsVim 下载,关闭visual studio ...
centeros 6 远程升级ssl ssh 的shell脚本
变量说明 SSL_N=openssl-1.0.2p #ssl 版本SSH_N=openssh-7.9p1 #ssh 版本ZLIB_N=zlib-1.2.11 # zlib 版本脚本分为两个,因为升级 ...
查询SYS_ORG_TB树的层级
WITH N(SYS_ORG_ID,SYS_ORG_NAME,LEVEL) AS( AS LEVEL FROM SYS_ORG_TB WHERE SYS_ORG_UPID IS NULL UNION ...
python_OS 模块
os模块用于提供系统级别的操作 os.getcwd() # 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") # 改变当前脚本工作目 ...
POJ 3310 Caterpillar（图的度的判定）
题意: 给定一幅图, 问符不符合一下两个条件: (1) 图中没有环 (2)图中存在一条链, 点要么在链上, 要么是链上点的邻居. 分析: 建图,记录度数, 去掉所有度为1的点, 然后看看剩下是否是有2 ...
洛谷2016 战略游戏（0/1状态的普通树形Dp）
题意: 给出一个树,覆盖树上某一个点的花费为w[i],求树上每一条边至少有一个点覆盖的最小花费. 细节: 1.一条边的两端可以均被覆盖,但是不能存在一条边的两端都不被覆盖. 2.可能存在分析: 对于 ...
CTSC1998 选课（背包类树形Dp）
题意: 给出 n 节课的先修课号以及学分(先修课号指的是在学习某节课时先需要学习的课程),求学 m 节课的最大学分. 细节: 1.对于课程 a 其先修课号为 b ,对于课程 b 其先修课号为 c ,则 ...
python基础——7（函数）
一.函数的定义(函数一定是先定义,后引用) 函数是完成特定功能的代码块. def:声明函数的关键字 fun:函数变量名 ():参数列表,参数可以是0-n个,但是()不能丢函数体:实现功能的具体代码 ...

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

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

随机推荐

热门专题