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

更新时间：2012年11月11日 17:19:32 作者：

美女瀑布流效果分享一下，大家勿喷啊借用新浪的美女嘿嘿睁大你的眼睛

<!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:0; padding:0; } h1{ text-align:center; height:100px; } body{ background-color:RGB(232,231,226); } .all{ margin:0 auto; width:1000px; } .number{ float:left; width:225px; } .content { margin:5px; background-color:white; } img{ margin:5px; } .loading{ position: absolute; width:100%; height:40px; display:none; text-align:center; background-color:RGB(189,203,207); } #toTop { position:fixed; _position:fixed; font-size:12px; color:Blue; width:15px; text-align:center; right:300px; bottom:100px; cursor:pointer; background-color:RGB(243,247,251); display:none; } </style> <script type="text/javascript"> window.onload = function () { //初始参数 var reset = 0; //某些滚动条会触发三次scroll事件 用这个解决 var surplusHeight = 800; //差值 var imgWidth = "206px"; //img的宽度 var imgHeight = 0; //img的高度 var textHeight = 0; //文字高度 var showTopButtonHeight = 500;//回到顶部按钮的距离 var bigDivCount = 4; 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[0] = "小花美女"; textArray[1] = "小花美女小花美女"; textArray[2] = "小花美女小花美女小花美女"; textArray[3] = "小花美女小花美女小花美女小花美女"; textArray[4] = "小花美女 小花美女"; textArray[5] = "小花美女小花小花美女"; textArray[6] = "小花美女"; textArray[7] = "小花美女小花美女"; textArray[8] = "小花美女小花美女小花美女"; textArray[9] = "小花美女小花美女小花美女小花美女小花美女"; textArray[10] = "小花美女小花美女小花美女小花美女小花美女"; textArray[11] = "小花美女小花美女小花美女小花美女小花美女小花美女"; textArray[12] = "小花美女小花美女小花美女小花美女小花美女小花美女小花美女"; textArray[13] = "小花美女小花美女小花美女小花美女小花美女小花美女小花美女小花美女"; textArray[14] = "小花美女小花美女小花美女小花美女小花美女小花美女小花美女小花美女"; textArray[15] = "小花美女小花美女小花美女小花美女小花美女小花美女小花美女小花美女"; imgArray[0] = "//img.jbzj.com/file_images/article/201211/960bda11tw1dnw504ga3vj.jpg"; imgArray[1] = "//img.jbzj.com/file_images/article/201211/771f735ctw1dnw5gv6dmcj.jpg"; imgArray[2] = "//img.jbzj.com/file_images/article/201211/5d5e9605gw1dnw4o6uk3gj.jpg"; imgArray[3] = "//img.jbzj.com/file_images/article/201211/6d9cb0b8jw1dnw5m0y5yrj.jpg"; imgArray[4] = "//img.jbzj.com/file_images/article/201211/62dae985gw1dnzc4mwvm5j.jpg"; imgArray[5] = "//img.jbzj.com/file_images/article/201211/8d95fb4cgw1dnzec2c6cdj.jpg"; imgArray[6] = "//img.jbzj.com/file_images/article/201211/872bccc8jw1dnzch2aqtkj.jpg"; imgArray[7] = "//img.jbzj.com/file_images/article/201211/5b104465tw1dnzdlozp6tj.jpg"; imgArray[8] = "//img.jbzj.com/file_images/article/201211/6de170f6jw1dnzl7jbzidj.jpg"; imgArray[9] = "//img.jbzj.com/file_images/article/201211/6a93dbfbgw1dnzeiu1draj.jpg"; imgArray[10] = "//img.jbzj.com/file_images/article/201211/6ea59a74jw1dnzm0wbf7vj.jpg"; imgArray[11] = "//img.jbzj.com/file_images/article/201211/48bf076ejw1dnzexjhl6dj.jpg"; imgArray[12] = "//img.jbzj.com/file_images/article/201211/6da7993fjw1dnvsnesrutj.jpg"; imgArray[13] = "//img.jbzj.com/file_images/article/201211/75914d3fgw1dnzlgn33njj.jpg"; imgArray[14] = "//img.jbzj.com/file_images/article/201211/6a8dea72gw1dnzlwnfju0j.jpg"; imgArray[15] = "//img.jbzj.com/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 == 0) { 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, 1000); reset = 1; } } else { setTimeout(function () { reset = 0; }, 1000); } } //加载图片 function loadImg() { loading.style.display = "none"; for (var i = 0; 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"; }, 1000); } //声明一个包含img和title的div function addDiv() { //数组下标的随机值 var ran = Math.round(Math.random() * (imgArray.length - 1)); //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") > 0) { return "MSIE"; } if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) { return "Firefox"; } if (isSafari = navigator.userAgent.indexOf("Safari") > 0) { return "Safari"; } if (isCamino = navigator.userAgent.indexOf("Camino") > 0) { return "Camino"; } if (isMozilla = navigator.userAgent.indexOf("Gecko/") > 0) { return "Gecko"; } } //回到顶部 toTop.onclick = function () { var count = 500; //每次的距离 var speed = 200; //速度 var timer = setInterval(function () { var top_top = document.body.scrollTop || document.documentElement.scrollTop; var tt = top_top - count; tt = (tt < 300) ? 0 : tt; if (top_top > 0) 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="//img.jbzj.com/file_images/article/201211/200803131036175436.gif" /> </div> <div id="toTop"><span>△回顶部</span></div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

瀑布流

第六篇Bootstrap表格样式介绍
这篇文章主要介绍了第六篇Bootstrap表格样式介绍的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
js实现碰撞检测
这篇文章主要为大家详细介绍了js实现碰撞检测，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-01-01
判断用户的在线状态 onbeforeunload事件
window.event.clientX和window.event.clientY 将捕捉当前事件发生时鼠标相对与窗口的桌面坐标，通常情况下IE的关闭按钮都会在页面的右上部分，所以点关闭的时候鼠标的坐标的Y坐标一定是小于0的
2011-03-03
如何通过JS实现日历简单算法
这篇文章主要介绍了如何通过JS实现日历简单算法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-10-10
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
这篇文章主要介绍了《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史,需要的朋友可以参考下
2015-01-01
详解如何使用JavaScript获取自动消失的联想词
前几天在做数据分析时,我尝试获取某网站上输入搜索词后的联想词,输入搜索词后会弹出一个显示联想词的框,有趣的是,输入框失去焦点后,联想词弹框就自动消失了,这种情况下该怎么办呢,所以本文给大家介绍了如何使用JavaScript获取自动消失的联想词,需要的朋友可以参考下
2024-06-06
javascript获取不重复的随机数的方法比较
js永不重复随机数实现代码比较
2008-09-09
JavaScript操作文件_动力节点Java学院整理
在HTML表单中，可以上传文件的唯一控件就是<input type="file">。下面通过本文给大家分享JavaScript操作文件的方法，感兴趣的朋友一起看看吧
2017-06-06
微信小程序点击item使之滚动到屏幕中间位置
这篇文章主要介绍了微信小程序点击item使之滚动到屏幕中间位置,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-03-03
写了个XML+Tree无穷树js版
写了个XML+Tree无穷树js版...
2007-09-09

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具