`

自己写的美女瀑布流分享一下

 
阅读更多 
<!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; //某些滚动条会触发三次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] = "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() {
                    //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>
            <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.xesee.com/upload/200803131036175436.gif" />
            </div>
            <div id="toTop"><span>△回顶部</span></div>
        </body>
    </html>
 
分享到：
| fixed仿淘宝工具栏效果（两种）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery+HTML5美女瀑布流布局实现方法

    这是一款JavaScript与HTML5实现美女瀑布流布局，本方法是把图片的路径写在了JS的数组里，不过重点好像不是在这里，而是在图片如何自动排列的问题，你可以运行本实例后，点击“加载瀑布流布局”按钮，即可看到图片的...

    jquery美女无限加载瀑布流效果

    本主题聚焦于"jquery美女无限加载瀑布流效果"，这是一个结合了jQuery、CSS3以及Ajax技术实现的网页动态展示方式，常见于图片分享、商品展示等应用场景。瀑布流布局以其独特的视觉体验，让用户在浏览过程中享受到类似...

    简单的jquery随机美女图片瀑布流无限加载.zip

    【标题】"简单的jquery随机美女图片瀑布流无限加载"是一个前端开发项目，它结合了jQuery库和瀑布流布局技术，用于实现一个动态加载随机美女图片的功能。这个项目的目的是为网页创建一个美观且交互性强的图片展示效果...

    ios-UC美女.zip

    采用plist写的美图录, 具体API还在编写中,先用plist写了个临时的版本供大家分享. github源码网址: https://github.com/RoseKissYou/UC-Girls/tree/kk 欢迎大家吐槽/鼓励

    Android代码-微影一款纯粹的在线视频App

    4.增加美女福利页面（瀑布流） 2016.10.11 1.增加意见反馈 2.修改影片详情页面（进入自动播放、影片简介展开收回，增加评论列表） 3.增加浏览记录页面(历史) 2016.9.29 1.增加收藏功能（使用Realm做本地库存储）...

    美女图片微信小程序源码

    - 在这个美女图片小程序中，可能通过网络请求获取图片数据，利用微信小程序的`&lt;image&gt;`组件来展示图片，并可能使用轮播图、瀑布流等布局方式增强用户体验。 - 数据管理可能涉及本地缓存和服务器通信，`php`目录下...

    帝国CMS美女图片站模板

    1. **首页设计**：首页通常采用瀑布流或者网格布局，展示各种美女图片的缩略图，点击后可跳转到图片的详细页面。还可能包含搜索框、导航菜单、热门标签等元素，以提供更好的用户体验。 2. **栏目页构建**：栏目页...

    美女婚纱摄影模板下载

    1. **视觉冲击力**：婚纱摄影是视觉艺术的体现，因此模版应具备高质量的图片展示功能，如高清幻灯片、瀑布流布局等，以便展示摄影师的作品。 2. **浪漫氛围**：婚纱摄影网站应营造出浪漫、优雅的氛围，色彩搭配、...

    discuz模板_迪恩moko美空加强版_商业版(UTF)

    1.模板名称：迪恩网络moko加强版，版本支持：discuzx3.0版本，discuzx3.1，discuzx3.2版本，包括网站首页，论坛首页，论坛列表页，论坛内容页，论坛瀑布流,美女展示列表页，美女图库内容页，人才库分类信息部分。...

    妹子图PHP源码+api接口全套源码上传即可

    2. **前端瀑布流**：这是一种常见的网页布局方式，图片会以瀑布式逐行下落，使得页面在有限的空间内可以展示更多的内容，且视觉效果流畅。 3. **AJAX无刷新加载**：通过AJAX技术，用户在滚动页面时，新内容会动态...

Magicbox
Global site tag (gtag.js) - Google Analytics