美文网首页我爱编程
ios -html-js运用-初识jQuery-bootstra

ios -html-js运用-初识jQuery-bootstra

作者: DeerRun | 来源:发表于2017-06-15 10:59 被阅读46次

用JS实现瀑布流布局

1.1 实现思路

  • 子标签相对父标签进行定位
  • 等宽不等高
  • 无限滚动,无限加载

1.2 代码实现

  • 实现瀑布流布局
  • 取出最小高度对应的索引
  • 检查是否具备滚动条件
  • 获取数据,重新进行布局

<p>html</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流首页</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
    <!--父盒子-->
    <div id="main">
        <!--单个盒子-->
        <div class="box">
            <div class="pic">
                ![](images/0.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/1.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/2.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/3.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/4.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/5.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/6.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/7.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/8.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/9.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/10.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/11.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/12.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/13.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/14.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/15.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/16.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/17.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/18.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/19.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/20.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/21.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/22.jpg)
            </div>
        </div>
        <div class="box">
            <div class="pic">
                ![](images/23.jpg)
            </div>
        </div>
    </div>

    <script src="js/index.js" type="text/javascript"></script>
</body>
</html>

<p>css</p>

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
    margin: 0;
    padding: 0;
}

#main{
    /*定位*/
    /*position: relative;*/
}

.box{
    /*内边距*/
    padding:15px 0 0 15px;
    float: left;

    /*background-color: red;*/
}

.pic{
    border:1px solid #dddddd;
    padding: 10px;
    background-color: white;
}

.pic img{
    width: 165px;
}

初识jQuery

Javascript存在的问题

  • 1.存在兼容性问题
  • 2.DOM操作相对较为复杂
  • 3.动画\特效实现较复杂

jQuery的优势

  • 1.轻松进行DOM操作
  • 2.轻松解决浏览器兼容问题
  • 3.轻松实现动画

jQuery的具体操作

  • 获得标签:$('选择器');
  • 获得标签中的属性:如: $('img').attr('src')
  • 修改标签中的属性:如: $('img').attr('src', 'image/img_02.jpg');
  • 查看标签中的内容:如: $('div>p').text()
  • 修改标签中的内容:如: $('div>p').text('我是MT');
  • 注意:所有的css选择器在jQuery中都适用

jQuery中的常用事件

  • 当页面加载完毕
  • 当页面开始滚动
  • 点击等事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>认识jQuery</title>
    <!--
       JS存在的问题:
       1. 浏览器兼容问题
       2. 存在复杂的dom操作
       3. 复杂的特效和动画的实现
       4. 请求网络数据存在跨域问题
       ...
       
       
       jquery优势:
       1. 几乎不存在浏览器兼容问题
       2. 轻松实现 Dom操作 和 特效和动画的实现
       3. 多种方式的网络请求方案
      
    -->
</head>
<body>
    <div id="main">
        <div class="word">
            <p>我是一段文字</p>
            <p>我是一段文字</p>
            <p>我是一段文字</p>
            <p>我是一段文字</p>
            <p>我是一段文字</p>
        </div>
        <div class="pic">
            ![](image/img_01.jpg)
            ![](image/img_01.jpg)
            ![](image/img_01.jpg)
            ![](image/img_01.jpg)
            ![](image/img_01.jpg)

        </div>
    </div>

    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <!--引用jQuery类库-->
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>
        // 1. $() ---> jquery对象

        // 2. 拿到对应的标签  Css选择器
//        $('#main .word')
//        console.log($('p'));

        // 3. 查看拿到的标签中的属性值
//        console.log($('.word').attr('class'));

        // 4. 改变拿到的标签中的属性值
        $('img').attr('src', 'image/img_02.jpg');
        $('img').attr('width', '100px');

        // 5.如何查看标签中内容
        console.log($('p').text());

        // 6.改变
        $('p').text('我是MT');

        // 7.事件
        // 7.1 显示
        $('button').eq(0).on('click', function () {
           $('p').show();
           $('img').show();
        });
        // 7.2 隐藏
        $('button').eq(1).on('click', function () {
            $('p').hide();
            $('img').hide();
        });
        // 7.4 切换
        $('button').eq(2).on('click', function () {
            $('p').toggle(2000);
            $('img').toggle(2000);
        });

        // 8. 遍历
        var datas = [10,21,222,3232,4];
        $.each(datas, function (index, value) {
            console.log(index, value);
        });

        // 9.取出对应的下标
        console.log($.inArray(222, datas));

        // 10.写css
        $('.word').css({
            background:'red',
            border:'1px solid green'
        });

    </script>
</body>
</html>

结合bootstrap快速开发官网

技术要点

  • 导航条
    <p>添加 .navbar-fixed-top 类可以让导航条固定在顶部</p>
    <p>包含一个.container或.container-fluid容器,从而让导航条居中显示或者自适应显示</p>
    <p>添加.navbar-inverse可以改变导航栏显示的背景颜色</p>
    <p>注意:固定的导航条会遮住页面上的其他内容,可给<body>设置padding</p>
  • 栅格系统布局
    <p>1、典型的栅格系统</p>
    <p>行(row)必须包含在.container(固定宽度)或.container-fluid(100%)中</p>
    <p>使用.col-md-栅格类,就可以创建一个基本的栅格系统,在手机和平板设备一开始是堆叠在一起,在屏幕(>970px)的设备上水平排列</p>
    <p>2、交叉布局</p>
    <p>通过使用针对平板设备的 .col-md-     类，可以创建更加动态和强大的布局</p>
    <p>3、标签页</p>
    <p>标签页是一个经常使用的组件,可以放置很多的内容,最大亮点是:节省页面空间</p>
    <p>4、Tab切换代码实现</p>
    <p>模态框 : 调用data-toggle="modal" data-target="#about-xmg"</p>

<p>html</p>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!--会根据设备的尺寸来约束window的大小-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>广州小码哥</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
<!--导航-->
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">广州小码哥</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">简介 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">综述</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">学院 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">iOS学院</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Java学院</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">安卓学院</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">C++学院</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">UI学院</a></li>
                    </ul>
                </li>
                <li><a href="#" data-toggle="modal" data-target="#xmg">关于</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!--焦点图-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- 指示器 -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- 中间的内容 -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            ![](images/nav_01.jpg)
            <!--<div class="carousel-caption">-->
                <!--<p>你们最牛逼?</p>-->
                <!--<button class="btn btn-success">是的</button>-->
            <!--</div>-->
        </div>
        <div class="item">
            ![](images/nav_02.jpg)
        </div>
        <div class="item">
            ![](images/nav_03.jpg)
        </div>
    </div>

    <!-- 控制 -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">上一张</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">下一张</span>
    </a>
</div>

<!--主要内容-->
<div id="main">
    <!--上部分-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                ![](images/apple.png)
                <h1>iOS学院</h1>
                <p>iOS学院,又称大神学院,学院的每一个学生都十分的牛逼,他们的梦想是用"指尖改变世界",励志做"中国的乔布斯".</p>
                <button class="btn btn-danger">立即咨询</button>
            </div>
            <div class="col-md-4">
                ![](images/java.png)
                <h1>Java学院</h1>
                <p>Java学院,学院的每一个学生也很牛逼,他们的梦想是通过代码改变自己,终极目标:"瞬间高富帅,赢取白富美"。</p>
                <button class="btn btn-danger">立即咨询</button>
            </div>
            <div class="col-md-4">
                ![](images/web.png)
                <h1>网页UI学院</h1>
                <p>网页UI学院,又称女神学院。学院每个学生的梦想是:设计出能改变世界的UI界面,成为其他两大学院男生心目中的女神。</p>
                <button class="btn btn-danger">立即咨询</button>
            </div>
        </div>
    </div>
    <!--下部分-->
    <div id="tab">
        <!-- 头部 -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">iOS学院</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Java学院</a></li>
            <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">UI学院</a></li>
        </ul>

        <!-- 内容面板 -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">
                <div class="row">
                    <div class="col-md-7">
                       <h1>iOS学院<span>史上最具逼格</span></h1>
                       <p class="lead">iOS学院，又称大神学院，学院内优秀学员比比皆是,不断挑战着业界薪资神话。学院的每一个学生都十分的牛逼,他们的梦想是用"指尖改变世界",励志做"中国的乔布斯"。</p>
                    </div>
                    <div class="col-md-5">
                       ![](images/safari-logo.jpg)
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">
                <div class="row">
                    <div class="col-md-5">
                        ![](images/firefox-logo.jpg)
                    </div>
                    <div class="col-md-7">
                        <h1>Java学院<span>史上最具实力</span></h1>
                        <p class="lead">Java学院,学院的每一个学生也很牛逼,他们的梦想是通过代码改变自己,终极目标:"瞬间高富帅,赢取白富美"。</p>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="messages">
                <div class="row">
                    <div class="col-md-7">
                        <h1>UI设计学院<span>史上最具美感</span></h1>
                        <p class="lead">UI学院,又称女神学院。学院每个学生的梦想是:设计出能改变世界的UI界面,成为其他两大学院男生心目中的女神。</p>
                    </div>
                    <div class="col-md-5">
                        ![](images/ie-logo.jpg)
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--横线-->
<hr>

<!--尾部-->
<footer>
    <p class="pull-left">© 2015 广州小码哥教育集团</p>
    <p class="pull-right"><a href="" target="_top">回到顶部</a></p>
</footer>


<!--模态框-->
<div class="modal fade" id="xmg" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">关于小码哥</h4>
            </div>
            <div class="modal-body">
                <p>广州小码哥教育集团，是一家从事高级IT人才培训的教育公司。2015年5月，李明杰MJ创办了小码哥，立志要打造一个卓越的IT培训品牌， 给广大的IT学子提供高质量高水平的IT技术教育培训及服务。</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">MJ</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<script src="bootstrap/js/jquery-1.11.3.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

<p>css</p>

body{
    padding-top: 50px;
}

#main{
    padding: 30px;
    text-align: center;
}

#main .container-fluid .col-md-4{
    margin-bottom: 20px;
}

#main .container-fluid .col-md-4 img{
    width: 140px;
}

#main .container-fluid .col-md-4 p{
    height: 60px;
    text-indent: 28px;
}


#tab{
    margin-top: 15px;
}

#tab .tab-content h1{
    color: red;
}

#tab .tab-content h1 span{
    color: grey;
    font-size: 20px;
}

#tab .tab-content p{
    text-align: left;
    text-indent: 28px;
}

#tab .tab-content .col-md-7{
    margin-top: 100px;
}

@media screen and (max-width: 961px){
    #tab .tab-content .col-md-7{
        margin-top: 10px;
    }
}

相关文章

网友评论

    本文标题：ios -html-js运用-初识jQuery-bootstra

    本文链接：https://www.haomeiwen.com/subject/uguyqxtx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    我爱编程

    关于我们|服务条款|联系我们|ios -html-js运用-初识jQuery-bootstra|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！