html 瀑布流

發布時間：2020-07-23 13:08:24 來源：網絡閱讀：262 作者：Jinl_bm 欄目：web開發

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>瀑布流以及回頂部的效果</title>

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>

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.yisu.com/upload/information/20200310/52/110361.jpg";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

imgArray[15] = "https://cache.yisu.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>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

向AI問一下細節

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

html 瀑布流

猜你喜歡

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

html 瀑布流

猜你喜歡

最新資訊

相關推薦

相關標簽