<!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实现的美女瀑布流效果代码的更多相关文章

  1. 利用JS实现简单的瀑布流效果

    哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...

  2. 使用JS实现图片展示瀑布流效果

    不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...

  3. js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...

  4. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  5. js图片瀑布流效果

    要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...

  6. JS 瀑布流效果

    JS瀑布流效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  7. 【前端】用jQuery实现瀑布流效果

    jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...

  8. js实现图片的瀑布流

    先看效果: 初始状态:

  9. 用jQuery实现瀑布流效果学习笔记

    jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...

随机推荐

  1. 解决chrome 批量下载器 mgblihnaaedmhhgadafknogahbgejnno 插件乱码

    找到 mgblihnaaedmhhgadafknogahbgejnno\当前版本号(0.0.1_0)\popup.html <html> <head> <meta cha ...

  2. TWaver可视化编辑器的前世今生（一）电信网管编辑器

    走到今天,TWaver,一个致力于在技术领域(Technology)的弄潮儿(Waver),已经是第十二个年头.当年网吧的小网管都是IDC机房的运维人员了,TWaver也见证了这个时代的成长变迁. 萌 ...

  3. Java开发者写SQL时常犯的10个错误

        首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 我要投稿 更多频道 » - 导航条 - 首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 我要投稿 更多频道 » - iOS ...

  4. ffmpeg mp4 mp3 wav flac webm aac ac3 ogg格式转换

    版权声明:本文为博主原创文章,未经允许不得转载. ffmpeg是Linux中转换音频视频文件的常用工具. mp4 to mp3: ffmpeg -i $ID.mp4 -acodec libmp3lam ...

  5. 特殊权限和facl

    目 录 第1章 FACL访问控制    1 1.1 FACL简介    1 1.2 getfacl命令查看acl权限    1 1.3 setfacl设置文件的cal权限    1 1.4 批量添加a ...

  6. docker：安装

    文章来源:http://www.cnblogs.com/hello-tl/p/8901132.html 0.卸载旧版本 # yum remove docker \ docker-client \ do ...

  7. POJ 2631 Roads in the North （树的直径）

    题意: 给定一棵树, 求树的直径. 分析: 两种方法: 1.两次bfs, 第一次求出最远的点, 第二次求该点的最远距离就是直径. 2.同hdu2196的第一次dfs, 求出每个节点到子树的最长距离和次 ...

  8. unittest多线程生成报告（BeautifulReport）

    前言 selenium多线程跑用例,这个前面一篇已经解决了,如何生成一个测试报告这个是难点,刚好在github上有个大神分享了BeautifulReport,完美的结合起来,就能生成报告了. 环境必备 ...

  9. jmespath库解析json

    在测试过程中,经常会去JSON中的某个值,jmespath可以是除了jsonpath的另外一种选择. 下面通过几个例子来说明jmespath在python的使用 jmespath python安装 非 ...

  10. python学习笔记--面向对象的编程和类

    一.面向对象的编程 面向对象程序设计--Object Oriented Programming,简称oop,是一种程序设计思想.二.面向对象的特性类:class类,对比现实世界来说就是一个种类,一个模 ...