用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">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</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">
</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">
<!--<div class="carousel-caption">-->
<!--<p>你們最牛逼?</p>-->
<!--<button class="btn btn-success">是的</button>-->
<!--</div>-->
</div>
<div class="item">
</div>
<div class="item">
</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">
<h1>iOS學院</h1>
<p>iOS學院,又稱大神學院,學院的每一個學生都十分的牛逼,他們的夢想是用"指尖改變世界",勵志做"中國的喬布斯".</p>
<button class="btn btn-danger">立即咨詢</button>
</div>
<div class="col-md-4">
<h1>Java學院</h1>
<p>Java學院,學院的每一個學生也很牛逼,他們的夢想是通過代碼改變自己,終極目標:"瞬間高富帥,贏取白富美"。</p>
<button class="btn btn-danger">立即咨詢</button>
</div>
<div class="col-md-4">
<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">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div class="row">
<div class="col-md-5">
</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">
</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">×</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;
}
}
