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)站建設的關注點不是能為您做些什么網(wǎng)站，而是怎么做網(wǎng)站，有沒有做好網(wǎng)站，給創(chuàng)新互聯(liá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; //某些滾動條會觸發(fā)三次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();

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

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

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

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

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

//數(shù)組下標的隨機值

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;

}

//通過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>

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

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

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

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

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

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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