ios -html-js运用-初识jQuery-bootstrap快速开发

用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;
    }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,033评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,725评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,473评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,846评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,848评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,691评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,053评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,700评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,856评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,430评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,034评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2赞 343

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1赞 92
  • Bootstrap3入门学习(上)
    教程整理自慕课网(原文部分错误在这篇文章得到修改，本文版本Bootstrap3.3.7)。 框架简介 Bootst...
    小小奶狗阅读 2,441评论 0赞 5
  • bootstrap笔记
    CSS全局样式 概览 移动设备优先 布局容器 1、container类用于固定宽度并支持响应式布局的容器 2、co...
    VEN_64d6阅读 1,383评论 0赞 1
  • bootstrap总结篇
    原文出处 http://blog.poetries.top/2016/11/19/bootstrap-review...
    程序员poetry阅读 7,057评论 0赞 42
  • 没道理
    我从不跟懂道理的人，讲道理。我只跟不懂道理的人，讲道理。所以我的道理讲得毫无道理。明知道可能讲不通还会去白费口舌，...
    诺言w阅读 147评论 0赞 0