html 瀑布流
更新:HHH   时间:2023-1-7


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

h2{ 

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] = "https://cache.tdyun.com/upload/information/20200310/52/110361.jpg"; 

imgArray[1] = "https://cache.tdyun.com/upload/information/20200310/52/110362.jpg"; 

imgArray[2] = "https://cache.tdyun.com/upload/information/20200310/52/110363.jpg"; 

imgArray[3] = "https://cache.tdyun.com/upload/information/20200310/52/110364.jpg"; 

imgArray[4] = "https://cache.tdyun.com/upload/information/20200310/52/110365.jpg"; 

imgArray[5] = "https://cache.tdyun.com/upload/information/20200310/52/110366.jpg"; 

imgArray[6] = "https://cache.tdyun.com/upload/information/20200310/52/110367.jpg"; 

imgArray[7] = "https://cache.tdyun.com/upload/information/20200310/52/110368.jpg"; 

imgArray[8] = "https://cache.tdyun.com/upload/information/20200310/52/110369.jpg"; 

imgArray[9] = "https://cache.tdyun.com/upload/information/20200310/52/110370.jpg"; 

imgArray[10] = "https://cache.tdyun.com/upload/information/20200310/52/110371.jpg"; 

imgArray[11] = "https://cache.tdyun.com/upload/information/20200310/52/110372.jpg"; 

imgArray[12] = "https://cache.tdyun.com/upload/information/20200310/52/110373.jpg"; 

imgArray[13] = "https://cache.tdyun.com/upload/information/20200310/52/110374.jpg"; 

imgArray[14] = "https://cache.tdyun.com/upload/information/20200310/52/110375.jpg"; 

imgArray[15] = "https://cache.tdyun.com/upload/information/20200310/52/110376.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> 

<h2 id="h2">I like TRY</h2> 

<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="https://cache.tdyun.com/upload/information/20200310/52/110377.jpg" /> 

</div> 

<div id="toTop"><span>△回顶部</span></div> 

</body> 

</html>


返回web开发教程...