html瀑布流-創(chuàng)新互聯(lián)

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

成都做網(wǎng)站、網(wǎng)站建設(shè)的關(guān)注點(diǎn)不是能為您做些什么網(wǎng)站，而是怎么做網(wǎng)站，有沒(méi)有做好網(wǎng)站，給創(chuàng)新互聯(lián)建站一個(gè)展示的機(jī)會(huì)來(lái)證明自己，這并不會(huì)花費(fèi)您太多時(shí)間，或許會(huì)給您帶來(lái)新的靈感和驚喜。面向用戶友好，注重用戶體驗(yàn)，一切以用戶為中心。

<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 () {

//初始參數(shù)

var reset = 0; //某些滾動(dòng)條會(huì)觸發(fā)三次scroll事件用這個(gè)解決

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();

//數(shù)據(jù)源

var imgArray = []; //img數(shù)組也就是數(shù)據(jù)來(lái)源

var textArray = []; //img底下的文字和img對(duì)應(yīng)

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();

//主會(huì)場(chǎng)

window.onscroll = fun_scroll;

//滾動(dòng)方法

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

//控制滾動(dòng)條次數(shù)以及判斷是否到達(dá)底部

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

}

//聲明一個(gè)包含img和title的div

function addDiv() {

//數(shù)組下標(biāo)的隨機(jī)值

var ran = Math.round(Math.random() * (imgArray.length - 1));

//title層

var small_div = document.createElement("div");

small_div.innerHTML = textArray[ran];

//內(nèi)部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;

}

//通過(guò)id得到對(duì)象

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>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站題目：html瀑布流-創(chuàng)新互聯(lián)
文章出自：http://www.rwnh.cn/article30/ichpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站設(shè)計(jì)、App設(shè)計(jì)、App開(kāi)發(fā)、移動(dòng)網(wǎng)站建設(shè)、用戶體驗(yàn)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

html瀑布流-創(chuàng)新互聯(lián)