[转]美女瀑布流完整代码

<!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;                var surplusHeight = 800;                 var imgWidth = "206px";                 var imgHeight = 0;                 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 = [];                 var textArray = [];                 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] = "http://ww4.sinaimg.cn/mw205/960bda11tw1dnw504ga3vj.jpg";                imgArray[1] = "http://ww1.sinaimg.cn/mw205/771f735ctw1dnw5gv6dmcj.jpg";                imgArray[2] = "http://ww3.sinaimg.cn/mw205/5d5e9605gw1dnw4o6uk3gj.jpg";                imgArray[3] = "http://ww1.sinaimg.cn/mw205/6d9cb0b8jw1dnw5m0y5yrj.jpg";                imgArray[4] = "http://ww2.sinaimg.cn/mw205/62dae985gw1dnzc4mwvm5j.jpg";                imgArray[5] = "http://ww2.sinaimg.cn/mw205/8d95fb4cgw1dnzec2c6cdj.jpg";                imgArray[6] = "http://ww4.sinaimg.cn/mw205/872bccc8jw1dnzch2aqtkj.jpg";                imgArray[7] = "http://ww4.sinaimg.cn/mw205/5b104465tw1dnzdlozp6tj.jpg";                imgArray[8] = "http://ww4.sinaimg.cn/mw205/6de170f6jw1dnzl7jbzidj.jpg";                imgArray[9] = "http://ww2.sinaimg.cn/mw205/6a93dbfbgw1dnzeiu1draj.jpg";                imgArray[10] = "http://ww3.sinaimg.cn/mw205/6ea59a74jw1dnzm0wbf7vj.jpg";                imgArray[11] = "http://ww2.sinaimg.cn/mw205/48bf076ejw1dnzexjhl6dj.jpg";                imgArray[12] = "http://ww4.sinaimg.cn/mw205/6da7993fjw1dnvsnesrutj.jpg";                imgArray[13] = "http://ww2.sinaimg.cn/mw205/75914d3fgw1dnzlgn33njj.jpg";                imgArray[14] = "http://ww1.sinaimg.cn/mw205/6a8dea72gw1dnzlwnfju0j.jpg";                imgArray[15] = "http://ww1.sinaimg.cn/mw205/696387aagw1dnzqd829yyj.jpg";                                loadImg();                                window.onscroll = fun_scroll;                                function fun_scroll() {                                        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;                        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);                }                                 function addDiv() {                                       var ran = Math.round(Math.random() * (imgArray.length - 1));                                        var small_div = document.createElement("div");                    small_div.innerHTML = textArray[ran];                                        var img = document.createElement("img");                    img.alt = "";                    img.src = imgArray[ran];                    img.style.width = imgWidth;                                         var div = document.createElement("div");                    div.className = "content";                    div.appendChild(img);                    div.appendChild(small_div);                    return div;                }                                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="http://www.mightsoft.cn/upload/201205081237444867.gif" />            </div>            <div id="toTop"><span>△回顶部</span></div>        </body>    </html>

华威

[转]美女瀑布流完整代码