花瓣网项目

今天所说的就是js中我所学的项目:

一个花瓣网网页,将所学的js知识都运用在里面,

如上就是所做的效果图,它总共就这些板块来搭建此页面,

将其样式都一笔带过。

用js来做的就是这几个方面,将其网页页面撑起。

1:主要的就是页面中的好多图片的滚动,瀑布流滚动页面,

这地方就需要用js中所学的瀑布流知识来做,

/**
 *自动创建图片
 */
function  autoCreateImg() {
    //1.1 数据
    var json=[
        {txt: '当我们正在为生活疲于奔命的时候,生活已经离我们而去。——约翰·列侬', pic: 'images/0.jpg'},
        {txt: '活在世上,不必什么都知道,只知道最好的就够了。——王小波', pic: 'images/1.jpg'},
        {txt: '世界上任何书籍都不能带给你好运,但是它们能让你悄悄变成你自己。——黑塞', pic: 'images/2.jpg'},
        {txt: '很多人不需要再见,只是路过而已。——《彼岸花》', pic: 'images/3.jpg'},
        {txt: '人生最困难的三件事:保守秘密,忘掉所受的创伤,充分利用余暇。——吉罗', pic: 'images/4.jpg'},
        {txt: '有些人是离开后,才会发觉那个人是最喜欢的。——《东邪西毒》', pic: 'images/5.jpg'},
        {txt: '我总是在日暮时分,书影与书影之间,宁静的悲哀里,最想念你。——亦舒', pic: 'images/6.jpg'},
        {txt: '再长的路,一步步地能走完,再短的路,不迈开双脚也无法到达。', pic: 'images/7.jpg'},
        {txt: '哪里会有人喜欢孤独,不过是不喜欢失望。——村上春树', pic: 'images/8.jpg'},
        {txt: '人时已尽,人世很长,我在中间,应当休息。——顾城', pic: 'images/9.jpg'},
        {txt: '信任的深浅,不在于会不会对你笑,而在于愿不愿意在你面前哭。', pic: 'images/10.jpg'},
        {txt: '有一种旅行,不为跋涉千里的向往,只为漫无目的的闲逛,不为人山人海的名胜,只为怡然自乐的街景...', pic: 'images/11.jpg'},
        {txt: '人都会孤独,但唯独他,可以越过这尘世的热闹,一眼明白这世间所有的繁华不过是他身边的过眼云烟。', pic: 'images/12.jpg'},
        {txt: '不乱于心,不困于情。不畏将来,不念过往。如此,安好。', pic: 'images/13.jpg'},
        {txt: '每一个人都需要这样一个朋友:当以为自己再也笑不出来的时候,他能让你开怀大笑!', pic: 'images/14.jpg'},
        {txt: '咖啡苦与甜,不在于怎么搅拌,而在于是否放糖;一段伤痛,不在于怎么忘记,而在于是否有勇气重新开始。', pic: 'images/15.jpg'},
        {txt: '其实我不是一定要等你,只是等上了,就等不了别人了。——《朝露若颜》', pic: 'images/16.jpg'},
        {txt: '一切都是瞬间,一切都会过去,一切过去了的都会变成亲切的怀念。——普希金', pic: 'images/17.jpg'},
        {txt: '多少人曾爱慕你年轻时的容颜,可知谁愿承受岁月无情的变迁', pic: 'images/18.jpg'},
        {txt: '不在任何东西面前失去自我,哪怕是教条,哪怕是别人的目光,哪怕是爱情。——《成为简·奥斯汀》', pic: 'images/19.jpg'},
        {txt: '你如果认识从前的我,也许你会原谅现在的我。——张爱玲', pic: 'images/20.jpg'},
        {txt: '简约不是少,而是没有多余。足够也不是多,而是刚好你在。', pic: 'images/21.jpg'},
        {txt: '若只是喜欢 何必夸张成爱。——林夕', pic: 'images/22.jpg'},
        {txt: '梦里出现的人,醒来时就该去见她,生活就是这么简单。——《新桥恋人》', pic: 'images/23.jpg'},
        {txt: '与众不同的你是幸运的,何必让自己变得与别人一样。', pic: 'images/24.jpg'},
        {txt: '阳光温热,岁月静好,你还不来,我怎敢老。', pic: 'images/25.jpg'},
        {txt: '一个人知道自己为什么而活,就能忍受任何生活。——尼采', pic: 'images/26.jpg'},
        {txt: '我们已经出发了太久,以至于我们忘了为什么要出发。——纪伯伦', pic: 'images/27.jpg'},
        {txt: '水来,我在水中等你;火来,我在灰烬中等你。——《你是我的独家记忆》', pic: 'images/28.jpg'},
        {txt: '天下就没有偶然,那不过是化了妆的,戴了面具的必然。——钱钟书', pic: 'images/29.jpg'}
    ], str, txt, pic, htmlStr;

    //1.2 遍历
    for (var i=0;i<30;i++){
        //1.2.0 获取父标签的文本
      str=$("dom_pull").innerHTML;

        //1.2.1取出图片的地址和文字
        txt=json[i].txt;
        pic=json[i].pic;

        //1.2.2创建字标签
        htmlStr="<div class='box'>" +
            "<div class='pic'>" +
            "<img src=" + pic + " alt=''>" +
            "<div class='cover'></div>" +
            "</div>" +
            "<p>" + txt + "</p>" +
            "<div class='btn-box'>" +
            "<a href='' class='collect'>采集</a>" +
            "<a href='' class='like'>" +
            "<span class='heart'></span>" +
            "</a></div></div>";

        //1.2.3拼接{
        str +=htmlStr;
        $("dom_pull").innerHTML=str;

        //1.2.4绑定事件
        var wrapBox=$("dom_pull").getElementsByTagName("box");
        var wrappic=$("dom_pull").getElementsByTagName("pic");
        for(var j=0;j<wrapBox.length;j++){
            wrapBox[j].onmouseover=function () {
                this.childNodes[2].style.display="block";
            };
            wrapBox[j].onmouseout = function () {
                this.childNodes[2].style.display = "none";
            };

            wrappic[j].onmouseover = function () {
                this.childNodes[1].style.display = "block";
            };

            wrappic[j].onmouseout = function () {
                this.childNodes[1].style.display = "none";
            }
        }

    }

}

 但是实现瀑布流布局还需我们之前所整理的代码。

/**
 * 实现瀑布流布局
 */
function waterFull(parent, child) {
    // 1. 父盒子居中
    // 1.1 获取所有的盒子
    var allBox = $(parent).getElementsByClassName(child);
    // 1.2 获取子盒子的宽度
    var boxWidth = allBox[0].offsetWidth;
    // 1.3 获取屏幕的宽度
    var screenW = document.documentElement.clientWidth;
    // 1.4 求出列数
    var cols = parseInt(screenW / boxWidth);

    var xyMargin = 16;



    // 2. 子盒子的定位
    // 2.1 定义高度数组
    var heightArr = [], boxHeight = 0, minBoxHeight = 0, minBoxIndex = 0;
    // 2.2 遍历子盒子
    for (var i = 0; i < allBox.length; i++) {
        // 2.2.1 求出每一个子盒子的高度
        boxHeight = allBox[i].offsetHeight + xyMargin;
        // 2.2.2 取出第一行盒子的高度放入高度数组
        if (i < cols) { // 第一行
            heightArr.push(boxHeight);

            allBox[i].style.position = "absolute";
            allBox[i].style.left = i * (boxWidth + xyMargin)+ 'px';
            allBox[i].style.top =  xyMargin + 'px';
        } else { // 剩余行
            // 1. 取出最矮的盒子高度
            minBoxHeight = _.min(heightArr);
            // 2. 求出最矮盒子对应的索引
            minBoxIndex = getMinBoxIndex(heightArr, minBoxHeight);
            // 3. 子盒子定位
            allBox[i].style.position = "absolute";
            allBox[i].style.left = minBoxIndex * (boxWidth + xyMargin)+ 'px';
            allBox[i].style.top = minBoxHeight +  xyMargin + 'px';
            // 4. 更新数组中的高度
            heightArr[minBoxIndex] += boxHeight;
        }
    }

    // 5. 更新父盒子的高度
    var parentHeight = allBox[allBox.length - 1].offsetTop + allBox[allBox.length - 1].offsetHeight;
    $(parent).style.height = parentHeight;
}
/**
 * 获取数组中最矮盒子高度的索引
 * @param arr
 * @param val
 * @returns {number}
 */
function getMinBoxIndex(arr, val) {
    for(var i=0; i<arr.length; i++){
        if(arr[i] === val){
            return i;
        }
    }
}
function $(id) {
    return typeof id === "string" ? document.getElementById(id) : null;
}

/**
 * 判断是否具备加载图片的条件
 */
function checkWillLoadImage() {
    // 1. 获取最后一个盒子
    var allBox = document.getElementsByClassName("box");
    var lastBox = allBox[allBox.length - 1];

    // 2. 求出最后一个盒子自身高度的一半 + offsetTop
    var lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;

    // 3. 求出屏幕的高度
    var screenW = document.body.clientHeight || document.documentElement.clientHeight;

    // 4. 求出页面偏离浏览器的高度
    var scrollTop = scroll().top;

    return lastBoxDis <= screenW + scrollTop;
}


代码中的这部分就是将index.html中选项卡内的给转化过来的,来对照片下的文字进行更换。

 

这样瀑布流照片就实现了。

2:如图我们要实现此页面的吸顶,

呈现效果如下:

 判断它是否吸顶,当滑动到太下了,让它滚动回顶部,

3:登录页面的显示和隐藏:

监听它点击和隐藏,给它做样式。

 

4:页面更换滚动

它是可以设置秒数滚动更换照片。

 

下面就是整个花瓣网的制作代码:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    title>花瓣网</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="page" class="page">
    <!--头部-->
    <header id="header" class="header">
        <div id="header_in" class="header-in">
            <div class="header-left">
                <ul>
                    <li class="logo-pic"><h1><a href=""></a></h1></li>
                    <li><a href="">发现</a></li>
                    <li><a href="">最新</a></li>
                    <li><a href="">美思</a></li>
                    <li><a href="">活动<span class="new">new</span></a></li>
                    <li><a href="">教育</a></li>
                    <li><a href="">...</a></li>
                </ul>
            </div>
            <div class="header-center">
                <input id="query" name="query" size="27" type="text" placeholder="搜索你喜欢的" value="">
            </div>
            <div class="header-right">
                <a href="javascript:;" class="register" id="register">
                    <span class="text">注册</span>
                </a>
                <a href="#" class="login" id="login">
                    <span class="text">登录</span>
                </a>
                </a>
            </div>
        </div>
    </header>
    <!--中间广告切换-->
    <section id="slider_banner" class="slider-banner">
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </section>
    <!--快速登录-->
    <section id="quick_login" class="quick-login">
        <div class="quick-login-in">
            <div class="intro">
                <div class="title">国内最优质图片灵感库</div>
                <div>已有数百万出众网友,用花瓣保存喜欢的图片。</div>
            </div>
            <div class="login_icon">
                <ul>
                    <li><a href=""><span></span></a></li>
                    <li><a href=""><span></span></a></li>
                    <li><a href=""><span></span></a></li>
                    <li><a href=""><span></span></a></li>
                </ul>
                <div class="tip_text">
                    <span class="line_left"></span>
                    <span class="text">用以上社交帐号直接登录</span>
                    <span class="line_right"></span>
                </div>
            </div>
        </div>
    </section>
    <!--吸顶效果-->
    <section id="top_nav" class="top-nav">
        <div class="top-nav-in">
            <div class="left">
                <p>国内最优质图片灵感库</p>
                <p>已有数百万出众网友,用花瓣保存喜欢的图片。</p>
            </div>
            <div class="right">
                <ul>
                    <li><p>用社交帐号直接登录:</p></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                </ul>
            </div>
        </div>
    </section>
    <!--类型标题-->
    <section id="type_title"  class="type-title">
        <div class="type-title-in">
            <span class="line-left"></span>
            <span>美图</span>
            <span class="line-right"></span>
        </div>
    </section>
    <!--选项卡-->
    <div id="tab" class="tab">
        <div id="tab_header" class="tab-header">
            <ul>
                <li class="current">采集</li>
                <li>推荐画板</li>
                <li>推荐用户</li>
            </ul>
        </div>
        <div id="tab_content" class="tab-content">
            <div class="dom" style="display: block">
                <div class="dom_top">
                    <ul>
                        <li><a href="" title="花瓣,陪你做生活的设计师"></a></li>
                        <li><a href="" title="句子的温度"></a></li>
                        <li><a href="" title="每天送自己一句话"></a></li>
                        <li><a href="" title="孤独患者"></a></li>
                        <li><a href="" title="笔尖的思绪"></a></li>
                    </ul>
                </div>
                <div class="dom-pull" id="dom_pull">
<!--                    <div class="box">-->
<!--                        <div class="pic">-->
<!--                            <img src="images/0.jpg" alt="">-->
<!--                            <div class="cover"></div>-->
<!--                            <p>当我们正在为生活疲于奔跑的时候,生活已经离我们而去。-&#45;&#45;约翰</p>-->
<!--                            <div class="btn-box">-->
<!--                                <a href="" class="collect">采集</a>-->
<!--                                <a href="" class="like">-->
<!--                                    <span class="heart"></span>-->
<!--                                </a>-->

<!--                            </div>-->
<!--                        </div>-->

<!--                    </div>-->
                </div>
            </div>
            <div class="dom">
                第二个
            </div>
            <div class="dom">
                第三个
            </div>
        </div>
    </div>
</div>
<!--右边浮动-->
<div id="elevator_item" class="elevator-item">
    <a href="" class="elevator" title="回到顶部"></a>
    <a href="" title="plus"></a>
</div>
<!--登录面板-->
<section id="mask" class="mask">
    <div id="mask_center" class="mask-center">
     <!--关闭-->
        <a href="#" class="close-btn" id="close_btn"></a>
     <!--logo-->
        <img class="logo-img" src="images/logo_2x.png" alt="">
     <!-- 内容-->
        <div class="center_box">
     <!--第三方账号登录-->
            <div class="txtBox">
                <span></span>
                <span class="txt">使用第三方账号登录</span>
                <span></span>
            </div>
     <!--按钮图片-->
            <div class="buttons">
                <a href="#" title="微博帐号登录" rel="nofollow" class="weibo"></a>
                <a href="#" title="QQ帐号登录" rel="nofollow" class="qzone"></a>
                <a href="#" title="微信帐号登录" rel="nofollow" class="wechat"></a>
                <a href="#" title="豆瓣帐号登录" rel="nofollow" class="douban"></a>
                <a href="#" title="人人帐号登录" rel="nofollow" class="renren"></a>
            </div>
            <div class="txtBox">
                <span></span>
                <span class="txt">使用手机号/邮箱登录</span>
                <span></span>
            </div>
            <!--表单-->
            <form action="" method="post" class="mail-login">
                <input type="hidden" name="_ref" value="frame">
                <input type="text" name="email" placeholder="输入手机号或者邮箱" class="clear-input">
                <input name="password" type="password" placeholder="密码" class="clear-input">
                <a href="#" onclick="return false;" class="btn btn18 rbtn">
                        <span class="text"> 登录
                        </span>
                </a>
            </form>
            <div class="switch-back">
                <a class="red-link">忘记密码»</a>
                还没有花瓣帐号?
                <a class="red-link">点击注册»</a>
            </div>
        </div>
    </div>
</section>
<script src="js/MyTool.js"></script>
<script src="js/Underscore-min.js"></script>
<script src="js/waterFull.js"></script>
<script src="js/index.js"></script>


</body>
</html>

css/index.html:

*{
    margin: 0;
    padding: 0;
    list-style: none;
    vertical-align: top;
}

html, body{
    width: 100%;
    height: 100%;
}

.page{
    width: 100%;
    height: auto;
    padding-top: 48px;
}

/*头部样式*/
.header{
    width: 100%;
    height: 48px;
    background-color: #fff;
    /*box-shadow: 0 5px 5px #ccc;*/

    /*定位*/
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

.header .header-in{
    width: 1244px;
    height: 100%;
    /*background-color: red;*/
    margin: 0 auto;
}

.header .header-in .header-left{
    width: 435px;
    height: 28px;
    /*background-color: red;*/
    float: left;
    margin-top: 10px;
}

.header .header-in .header-left li{
    float: left;
    margin-right: 20px;
}

.header .header-in .header-left li a{
    line-height: 28px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    color: #444444;
    font-size: 14px;
}

.header .header-in .header-left li a:hover{
    color: #c90000;
}

.header .header-in .header-left li:nth-child(7) a{
    font-size: 40px;
    line-height: 2px;
}

.header .header-in .header-left .new{
    width: 30px;
    height: 14px;
    background-color: #f4a523;
    display: inline-block;
    line-height: 14px;
    margin-top: 6px;
    margin-left: 2px;
    color: #fff;
    font-size: 12px;
}

.header .header-in .header-left .logo-pic a{
    width: 80px;
    height: 28px;display: inline-block;
    background: url("../images/huaban_logo.png") no-repeat;
    background-size:cover;
}

.header .header-in .header-center{
    width: 675px;
    height: 34px;
    background-color: #ccc;
    float: left;
    margin-top: 7px;
}

.header .header-in .header-center input{
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    outline: none;
    background-color: #fafafa;
    border: 1px solid #ddd;
    font-size: 14px;
    resize: none;
}

.header .header-in .header-right{
    width: 116px;
    height: 48px;
    float: right;
}

.header .header-in .header-right a{
    float: right;
    width: 52px;
    height: 32px;
    line-height: 32px;
    display: inline;
    text-align: center;
    text-decoration: none;
    color: #383838;
    border: 1px solid #d9d9d9;
    margin-top: 7px;
    font-size: 16px;
    border-radius: 2px;
}

.header .header-in .header-right a:nth-child(1){
    float: left;
    background: linear-gradient(#E53E49, #D43636);
    color: #fff;
    border:1px solid #c90000;
}

.header .header-in .header-right a:nth-child(1):hover{
    background-color: #E53E49;
}
/*头部样式*/

/*轮播广告样式*/
.slider-banner{
    width: 100%;
    height: 60px;
    background-color: green;
}

.slider-banner ul{
    width: 100%;
    height: 60px;
    position: relative;
}

.slider-banner ul li{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
}

.slider-banner ul li a{
    display: inline-block;
    width: 100%;
    height: 100%;
}

.slider-banner ul li:nth-child(1) a{
    background: url("../images/top_banner01.jpg") center center;
}

.slider-banner ul li:nth-child(2) a{
    background: url("../images/top_banner02.jpg") center center;
}

.slider-banner ul li:nth-child(3) a{
    background: url("../images/top_banner03.jpg") center center;
}

.slider-banner ul li:nth-child(4) a{
    background: url("../images/top_banner04.jpg") center center;
}

.slider-banner ul li:nth-child(5) a{
    background: url("../images/top_banner05.jpg") center center;
}

.slider-banner ul li:nth-child(1) a{
    background: url("../images/top_banner01.jpg") center center;
}

.slider-banner ul li:nth-child(6) a{
    background: url("../images/top_banner06.jpg") center center;
}

.slider-banner ul li:nth-child(7) a{
    background: url("../images/top_banner07.jpg") center center;
}
/*轮播广告样式*/

/*快速登录样式*/
.quick-login{
    width: 100%;
    height: 120px;
    background: url("../images/login_header_blurbg.jpg") center center;
}

.quick-login .quick-login-in{
    width: 1244px;
    height: 100%;
    /*background-color: red;*/
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 18px;
}

.quick-login .quick-login-in .intro{
    /*background-color: blue;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quick-login .quick-login-in .intro .title{
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 5px;
}

.quick-login .quick-login-in .login_icon{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.quick-login .quick-login-in .login_icon li{
    float: left;
    margin-right: 15px;
    margin-bottom: 5px;
}

.quick-login .quick-login-in .login_icon li a{
    width: 54px;
    height: 54px;
    display: inline-block;
    border-radius: 50%;
}

.quick-login .quick-login-in .login_icon li:nth-child(1) a{
    background: url("../images/icon.jpg") 0 0;
}
.quick-login .quick-login-in .login_icon li:nth-child(2) a{
    background: url("../images/icon.jpg")60px 0;
}

.quick-login .quick-login-in .login_icon li:nth-child(3) a{
    background: url("../images/icon.jpg") 140px 0;
}

.quick-login .quick-login-in .login_icon li:nth-child(4) a {
    background: url("../images/icon.jpg") 220px 0;
}

.quick-login .quick-login-in .login_icon .tip_text{
    position: relative;
}

.quick-login .quick-login-in .login_icon .tip_text .line_left{
    border-top:1px solid #fff;
    display: block;
    position: absolute;
    width: 40px;
    top: 10px;
    left: -45px;
}

.quick-login .quick-login-in .login_icon .tip_text .line_right{
    border-top:1px solid #fff;
    display: block;
    position: absolute;
    width: 40px;
    top: 10px;
    right: -45px;
}
/*快速登录样式*/

/*吸顶效果样式*/
.top-nav{
    width: 100%;
    height: 70px;
    position: fixed;
    left: 0;
    top: 48px;
    background-color: rgba(0, 0, 0, .5);
    z-index: 999;
    display: none;
}

.top-nav .top-nav-in{
    width: 1244px;
    height: 100%;
    margin: 0 auto;
    /*background-color: red;*/
}

.top-nav .top-nav-in>div{
    width: 350px;
    height: 100%;
    color: #fff;
}

.top-nav .top-nav-in .left{
    float: left;
}

.top-nav .top-nav-in .left p:nth-child(1){
    font-size: 24px;
    font-weight: 700;
    margin-top: 12px;
}

.top-nav .top-nav-in .right{
    float: right;
    padding-top: 15px;
    box-sizing: border-box;
}

.top-nav .top-nav-in .right li{
    width: 42px;
    height: 42px;
    float: left;
    margin-left: 8px;
}

.top-nav .top-nav-in .right li a{
    width: 42px;
    height: 42px;
    display: inline-block;
}

.top-nav .top-nav-in .right li:nth-child(1){
    width: 140px;
    font-size: 14px;
    line-height: 42px;
}

.top-nav .top-nav-in .right li:nth-child(2){
    background: url("../images/icon2.png");
    background-size:cover;
}
.top-nav .top-nav-in .right li:nth-child(3){
    background: url("../images/icon2.png") -42px 0;
    background-size:cover;
}
.top-nav .top-nav-in .right li:nth-child(4){
    background: url("../images/icon2.png") -84px 0;
    background-size:cover;
}
.top-nav .top-nav-in .right li:nth-child(5){
    background: url("../images/icon2.png") -126px 0;
    background-size:cover;
}
/*吸顶效果样式*/

/*类型标题样式*/
.type-title{
    width: 100%;
    height: 130px;
    /*background-color: red;*/
}

.type-title .type-title-in{
    position: relative;
    width: 230px;
    height: 100%;
    margin: 0 auto;
    /*background-color: green;*/
    text-align: center;
    line-height: 130px;
    font-size: 30px;
    color: #666;
}

.type-title .type-title-in .line-left, .type-title .type-title-in .line-right{
    width: 48px;
    border-top:1px solid #666;
    position: absolute;
    top: 65px;
}

.type-title .type-title-in .line-left{
    left: 15px;
}

.type-title .type-title-in .line-right{
    right: 15px;
}
/*类型标题样式*/


/*选项卡样式*/
.tab{
    width: 100%;
    height: auto;
}

.tab .tab-header{
    width: 300px;
    height: 48px;
    /*background-color: red;*/
    margin: 0 auto;
}

.tab .tab-header ul li{
    float: left;
    width: 100px;
    text-align: center;
    line-height: 47px;
    font-size: 18px;
    cursor: pointer;
}

.tab .tab-header ul li.current{
    border-bottom: 1px solid orangered;
    color: orangered;
}

.tab .tab-content{
    width: 100%;
    background-color: #e8e8e8;
}

.tab .tab-content .dom:nth-child(1){
    width: 100%;
    /*background-color: red;*/
}

.tab .tab-content .dom:nth-child(2){
    width: 100%;
    /*background-color: green;*/
}

.tab .tab-content .dom:nth-child(3){
    width: 100%;
    /*background-color: yellow;*/
}

.tab .tab-content .dom{
    display: none;

}

.dom_top{
    width: 1244px;
    padding: 16px;
    margin: 0 auto;
    height: 126px;
}

.dom_top li{
    width: 236px;
    height: 126px;
    border-radius: 4px;
    background-color: red;
    float: left;
    margin-left: 16px;
}

.dom_top li a{
    width: 236px;
    height: 126px;
    display: inline-block;
}

.dom_top li:nth-child(1){
    margin-left: 0;
}

.dom_top li:nth-child(1) a{
    background: url("../images/top01.png");
}

.dom_top li:nth-child(2) a{
    background: url("../images/top02.jpg");
}

.dom_top li:nth-child(3) a{
    background: url("../images/top03.jpg");
}

.dom_top li:nth-child(4) a{
    background: url("../images/top04.jpg");
}

.dom_top li:nth-child(5) a{
    background: url("../images/top05.jpg");
}
/*选项卡样式*/


.dom-pull{
    width: 1240px;
    padding: 20px 0;
    position: relative;
    margin: 0 auto;

}
.dom-pull .box{
    width: 234px;
    float: left;
    border: 1px solid #CCCCCC;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.dom-pull .box .pic{
    position: relative;
    cursor: pointer;
}
.dom-pull .box .pic img{
    width: 234px;
}
.dom-pull p{
    line-height: 18px;
    padding: 0 10px;
    margin: 10px 0;
    font-size: 12px;
    word-wrap: break-word;
}
.dom-pull .box .pic .cover{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(225, 255, 255,0.2);
    display: none;
}
.dom-pull .box .btn-box {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    background-color: red;
    z-index: 3;
    display: none;
}
.dom-pull .box .btn-box .collect{
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    line-height: 30px;
    background-color: #E53E49;
    padding: 0 12px;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 12px;
}
.dom-pull .box .btn-box .like{
    position: absolute;
    top: 0;
    right: 0;
    height: 30px;
    width: 30px;
    background-color: #FFFFFF;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;

}
.dom-pull .box .btn-box .like .heart{
    width: 14px;
    height: 14px;
    background: url("../images/action_icons12.png") -20px 0;
    display: inline-block;

}

/*右下角样式*/
.elevator-item{
    position: fixed;
    right: 15px;
    bottom: 10px;
    z-index: 1000;
    opacity: 1;

}
.elevator-item .elevator{
    width: 40px;
    height: 36px;
    background: url("../images/iconsprite_btbar.png") 8px 6px no-repeat;
    display: inline-block;
    background-color: #b4b4b4;
    background-color: rgba(0, 0, 0, .6);
    border-radius: 4px;
}
.elevator-item .elevator:hover{
    background-color: rgba(0, 0, 0, .8);
}
.elevator-item .plus {
    width: 40px;
    height: 36px;
    background: url("../images/iconsprite_btbar.png") 8px -34px no-repeat;
    display: inline-block;
    background-color: #444;
    background-color: rgba(0, 0, 0, .6);
    border-radius: 4px;
}

.elevator-item .plus:hover{
    background-color: rgba(0, 0, 0, .8);
}
/*登录面板*/
.mask{
    position: fixed;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 999;
}
.mask .mask-center{
    width: 520px;
    height: 420px;
    background-color: #FFFFFF;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -160px;
    margin-left: -260px;
    border-radius: 5px;
    padding: 30px;
    box-sizing: border-box;
}
.mask .mask-center .center_box{
    width: 286px;
    /*background-color: red;*/
    margin: 20px auto 0;
}
.mask .mask-center .close-btn{
    position: absolute;
    top: 10px;
    right: 10px;
    background: url("../images/msg_close.png") 0 0;
    width: 18px;
    height: 18px;
    display: inline-block;
}
.mask .mask-center .logo-img{
    display: block;
    width: 106px;
    margin: 0 auto;
}
.txtBox{
    position: relative;
    text-align: center;
    margin: 0 auto;
    color: #999;
}
.txtBox span:nth-child(1){
    content: "";
    border-top: 1px solid #ededed;
    display: block;
    position: absolute;
    width: 50px;
    top: 8px;
    left: 0;
}
.txtBox span:nth-child(3){
    content: "";
    border-top: 1px solid #ededed;
    display: block;
    position: absolute;
    width: 50px;
    top: 8px;
    right: 0;
}
.center_box .buttons{
    margin: 15px 0 20px;
    text-align: center;
    /*font-size: 0;*/
    letter-spacing: -999px;

}
.center_box .buttons a {
    background-image: url('../images/login_icons_tiny.svg');
    width: 48px;
    height: 48px;
    margin-right: 10px;
    letter-spacing: 0;

}

.center_box .buttons a:nth-child(1){
    display: inline-block;
}
.center_box .buttons a:nth-child(2){
    display: inline-block;
    background-position: -80px 0;
}
.center_box .buttons a:nth-child(3){
    display: inline-block;
    background-position: -160px 0;
}
.center_box .buttons a:nth-child(4){
    display: inline-block;
    background-position: -240px 0;
}
.center_box .buttons a:nth-child(5){
    display: inline-block;
    background-position: -320px 0;
    margin-right: 0;

}

.center_box .mail-login {
    margin-top: 15px;
}

.center_box .mail-login .clear-input {
    margin-bottom: 10px;
    box-sizing: border-box;
    width: 100%;
}

.clear-input {
    display: inline-block;
    padding: 0 10px;
    height: 36px;
    font-size: 16px;
    line-height: 1;
    color: #777;
    background: #FCFCFC;
    border: 1px solid #CCC;
    border-radius: 3px;
    width: 250px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
    -webkit-transition: color .2s linear,border-color .3s linear;
}

.btn18 {
    font-size: 18px;
    padding: 0 15px;
    border-radius: 3px;
    height: 36px;
    line-height: 36px;
}

.rbtn {
    display: block;
    background: #E53E49;
    background: linear-gradient( #E53E49, #D43636);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 0 rgba(255,255,255,.3);
    text-shadow: 0 -1px 0 rgba(0,0,0,.1);
    color: #fff;
    border: 1px solid #C90000;
    text-align: center;
    text-decoration: none;
}

.switch-back {
    text-align: center;
    margin: 10px 0;
}

.red-link {
    color: #9A0000;
}
.center_box a {
    cursor: pointer;
}

index.js:

(function (window) {
    //1调用选项卡
    tab();
    //2动态创建元素
    autoCreateImg();

    //3瀑布流布局
 setTimeout(function () {
     waterFull("dom_pull","box")
 },200);
     //4窗口的滚动
    window.onscroll=function () {
        //4.1瀑布流加载新图片的条件
        if(checkWillLoadImage()){
            autoCreateImg();
            waterFull("dom_pull", "box");
        }
        //4.2判断是否吸顶
        var scrollTop =scroll().top;
        if(scrollTop >=150){
            $('top_nav').style.display = "block";
            $('elevator').style.display = "block";
        }else{
            $('top_nav').style.display = "none";
            $('elevator').style.display = "none";
        }

        // 4.4. 滚回顶部
        $('elevator').onclick = function () {
            buffer(document.documentElement, {scrollTop: 0}, null);
        }
    };
    //5 监听点击按钮
    $("login").onclick=function () {
        $("mask").style.display="block";
    };
    $("close_btn").onclick=function () {
        $("mask").style.display="none";
    };
    //6广告轮播
    bannerAutoPlay();
})(window);
/**
 自动播放
 */
function bannerAutoPlay() {
    //1获取所有li标签
    var lis=$("slider_banner").getElementsByTagName("li");
    var index=0;
    //2开始定时器
    setInterval(function () {
        //2.1改变透明度
        for (var i=0;i<lis.length;i++){
            var singerLi=lis[i];
            buffer(singerLi,{opacity:0},null);
        }
        buffer(lis[index],{opacity:1},null);


        //2.2索引++
        index++;
        if (index===lis.length){
            index=0;
        }
    },2000)
}

/**
 *自动创建图片
 */
function  autoCreateImg() {
    //1.1 数据
    var json=[
        {txt: '当我们正在为生活疲于奔命的时候,生活已经离我们而去。——约翰·列侬', pic: 'images/0.jpg'},
        {txt: '活在世上,不必什么都知道,只知道最好的就够了。——王小波', pic: 'images/1.jpg'},
        {txt: '世界上任何书籍都不能带给你好运,但是它们能让你悄悄变成你自己。——黑塞', pic: 'images/2.jpg'},
        {txt: '很多人不需要再见,只是路过而已。——《彼岸花》', pic: 'images/3.jpg'},
        {txt: '人生最困难的三件事:保守秘密,忘掉所受的创伤,充分利用余暇。——吉罗', pic: 'images/4.jpg'},
        {txt: '有些人是离开后,才会发觉那个人是最喜欢的。——《东邪西毒》', pic: 'images/5.jpg'},
        {txt: '我总是在日暮时分,书影与书影之间,宁静的悲哀里,最想念你。——亦舒', pic: 'images/6.jpg'},
        {txt: '再长的路,一步步地能走完,再短的路,不迈开双脚也无法到达。', pic: 'images/7.jpg'},
        {txt: '哪里会有人喜欢孤独,不过是不喜欢失望。——村上春树', pic: 'images/8.jpg'},
        {txt: '人时已尽,人世很长,我在中间,应当休息。——顾城', pic: 'images/9.jpg'},
        {txt: '信任的深浅,不在于会不会对你笑,而在于愿不愿意在你面前哭。', pic: 'images/10.jpg'},
        {txt: '有一种旅行,不为跋涉千里的向往,只为漫无目的的闲逛,不为人山人海的名胜,只为怡然自乐的街景...', pic: 'images/11.jpg'},
        {txt: '人都会孤独,但唯独他,可以越过这尘世的热闹,一眼明白这世间所有的繁华不过是他身边的过眼云烟。', pic: 'images/12.jpg'},
        {txt: '不乱于心,不困于情。不畏将来,不念过往。如此,安好。', pic: 'images/13.jpg'},
        {txt: '每一个人都需要这样一个朋友:当以为自己再也笑不出来的时候,他能让你开怀大笑!', pic: 'images/14.jpg'},
        {txt: '咖啡苦与甜,不在于怎么搅拌,而在于是否放糖;一段伤痛,不在于怎么忘记,而在于是否有勇气重新开始。', pic: 'images/15.jpg'},
        {txt: '其实我不是一定要等你,只是等上了,就等不了别人了。——《朝露若颜》', pic: 'images/16.jpg'},
        {txt: '一切都是瞬间,一切都会过去,一切过去了的都会变成亲切的怀念。——普希金', pic: 'images/17.jpg'},
        {txt: '多少人曾爱慕你年轻时的容颜,可知谁愿承受岁月无情的变迁', pic: 'images/18.jpg'},
        {txt: '不在任何东西面前失去自我,哪怕是教条,哪怕是别人的目光,哪怕是爱情。——《成为简·奥斯汀》', pic: 'images/19.jpg'},
        {txt: '你如果认识从前的我,也许你会原谅现在的我。——张爱玲', pic: 'images/20.jpg'},
        {txt: '简约不是少,而是没有多余。足够也不是多,而是刚好你在。', pic: 'images/21.jpg'},
        {txt: '若只是喜欢 何必夸张成爱。——林夕', pic: 'images/22.jpg'},
        {txt: '梦里出现的人,醒来时就该去见她,生活就是这么简单。——《新桥恋人》', pic: 'images/23.jpg'},
        {txt: '与众不同的你是幸运的,何必让自己变得与别人一样。', pic: 'images/24.jpg'},
        {txt: '阳光温热,岁月静好,你还不来,我怎敢老。', pic: 'images/25.jpg'},
        {txt: '一个人知道自己为什么而活,就能忍受任何生活。——尼采', pic: 'images/26.jpg'},
        {txt: '我们已经出发了太久,以至于我们忘了为什么要出发。——纪伯伦', pic: 'images/27.jpg'},
        {txt: '水来,我在水中等你;火来,我在灰烬中等你。——《你是我的独家记忆》', pic: 'images/28.jpg'},
        {txt: '天下就没有偶然,那不过是化了妆的,戴了面具的必然。——钱钟书', pic: 'images/29.jpg'}
    ], str, txt, pic, htmlStr;

    //1.2 遍历
    for (var i=0;i<30;i++){
        //1.2.0 获取父标签的文本
      str=$("dom_pull").innerHTML;

        //1.2.1取出图片的地址和文字
        txt=json[i].txt;
        pic=json[i].pic;

        //1.2.2创建字标签
        htmlStr="<div class='box'>" +
            "<div class='pic'>" +
            "<img src=" + pic + " alt=''>" +
            "<div class='cover'></div>" +
            "</div>" +
            "<p>" + txt + "</p>" +
            "<div class='btn-box'>" +
            "<a href='' class='collect'>采集</a>" +
            "<a href='' class='like'>" +
            "<span class='heart'></span>" +
            "</a></div></div>";

        //1.2.3拼接{
        str +=htmlStr;
        $("dom_pull").innerHTML=str;

        //1.2.4绑定事件
        var wrapBox=$("dom_pull").getElementsByTagName("box");
        var wrappic=$("dom_pull").getElementsByTagName("pic");
        for(var j=0;j<wrapBox.length;j++){
            wrapBox[j].onmouseover=function () {
                this.childNodes[2].style.display="block";
            };
            wrapBox[j].onmouseout = function () {
                this.childNodes[2].style.display = "none";
            };

            wrappic[j].onmouseover = function () {
                this.childNodes[1].style.display = "block";
            };

            wrappic[j].onmouseout = function () {
                this.childNodes[1].style.display = "none";
            }
        }

    }

}

function tab() {
    // 1. 获取需要的标签
    var allLis = $("tab_header").getElementsByTagName("li");
    var doms = $("tab_content").getElementsByClassName("dom");
    var lastOne = 0;

    // 2. 遍历监听
    for (var i = 0; i < allLis.length; i++) {
        var li = allLis[i];
        (function (i) {
            li.onmousedown = function () {
                // 1. 清除样式
                allLis[lastOne].className = "";
                doms[lastOne].style.display = "none";
                // 2. 设置选中
                this.className = "current";
                doms[i].style.display = "block";
                // 3. 赋值
                lastOne = i;
            }
        })(i);
    }

}

function $(id) {
    return typeof id === "string" ? document.getElementById(id) : null;
}

实现瀑布流布局的:

/**
 * 实现瀑布流布局
 */
function waterFull(parent, child) {
    // 1. 父盒子居中
    // 1.1 获取所有的盒子
    var allBox = $(parent).getElementsByClassName(child);
    // 1.2 获取子盒子的宽度
    var boxWidth = allBox[0].offsetWidth;
    // 1.3 获取屏幕的宽度
    var screenW = document.documentElement.clientWidth;
    // 1.4 求出列数
    var cols = parseInt(screenW / boxWidth);

    var xyMargin = 16;



    // 2. 子盒子的定位
    // 2.1 定义高度数组
    var heightArr = [], boxHeight = 0, minBoxHeight = 0, minBoxIndex = 0;
    // 2.2 遍历子盒子
    for (var i = 0; i < allBox.length; i++) {
        // 2.2.1 求出每一个子盒子的高度
        boxHeight = allBox[i].offsetHeight + xyMargin;
        // 2.2.2 取出第一行盒子的高度放入高度数组
        if (i < cols) { // 第一行
            heightArr.push(boxHeight);

            allBox[i].style.position = "absolute";
            allBox[i].style.left = i * (boxWidth + xyMargin)+ 'px';
            allBox[i].style.top =  xyMargin + 'px';
        } else { // 剩余行
            // 1. 取出最矮的盒子高度
            minBoxHeight = _.min(heightArr);
            // 2. 求出最矮盒子对应的索引
            minBoxIndex = getMinBoxIndex(heightArr, minBoxHeight);
            // 3. 子盒子定位
            allBox[i].style.position = "absolute";
            allBox[i].style.left = minBoxIndex * (boxWidth + xyMargin)+ 'px';
            allBox[i].style.top = minBoxHeight +  xyMargin + 'px';
            // 4. 更新数组中的高度
            heightArr[minBoxIndex] += boxHeight;
        }
    }

    // 5. 更新父盒子的高度
    var parentHeight = allBox[allBox.length - 1].offsetTop + allBox[allBox.length - 1].offsetHeight;
    $(parent).style.height = parentHeight;
}
/**
 * 获取数组中最矮盒子高度的索引
 * @param arr
 * @param val
 * @returns {number}
 */
function getMinBoxIndex(arr, val) {
    for(var i=0; i<arr.length; i++){
        if(arr[i] === val){
            return i;
        }
    }
}
function $(id) {
    return typeof id === "string" ? document.getElementById(id) : null;
}

/**
 * 判断是否具备加载图片的条件
 */
function checkWillLoadImage() {
    // 1. 获取最后一个盒子
    var allBox = document.getElementsByClassName("box");
    var lastBox = allBox[allBox.length - 1];

    // 2. 求出最后一个盒子自身高度的一半 + offsetTop
    var lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;

    // 3. 求出屏幕的高度
    var screenW = document.body.clientHeight || document.documentElement.clientHeight;

    // 4. 求出页面偏离浏览器的高度
    var scrollTop = scroll().top;

    return lastBoxDis <= screenW + scrollTop;
}


整个花瓣网页就搭建出来,有兴趣的可以看看。

 

 

 

 

 

 

 

 

 

 

 

 

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页