用JS实现瀑布流布局
1.1 实现思路
- 子标签相对父标签进行定位
- 等宽不等高
- 无限滚动,无限加载
1.2 代码实现
- 实现瀑布流布局
- 取出最小高度对应的索引
- 检查是否具备滚动条件
- 获取数据,重新进行布局
html
瀑布流首页
css
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中的常用事件
- 当页面加载完毕
- 当页面开始滚动
- 点击等事件
认识jQuery
我是一段文字
我是一段文字
我是一段文字
我是一段文字
我是一段文字
结合bootstrap快速开发官网
技术要点
- 导航条
添加 .navbar-fixed-top 类可以让导航条固定在顶部
包含一个.container或.container-fluid容器,从而让导航条居中显示或者自适应显示
添加.navbar-inverse可以改变导航栏显示的背景颜色
注意:固定的导航条会遮住页面上的其他内容,可给
设置padding - 栅格系统布局
1、典型的栅格系统
行(row)必须包含在.container(固定宽度)或.container-fluid(100%)中
使用.col-md-栅格类,就可以创建一个基本的栅格系统,在手机和平板设备一开始是堆叠在一起,在屏幕(>970px)的设备上水平排列
2、交叉布局
通过使用针对平板设备的 .col-md- 类，可以创建更加动态和强大的布局
3、标签页
标签页是一个经常使用的组件,可以放置很多的内容,最大亮点是:节省页面空间
4、Tab切换代码实现
模态框 : 调用data-toggle="modal" data-target="#about-xmg"
html
广州小码哥
iOS学院
iOS学院,又称大神学院,学院的每一个学生都十分的牛逼,他们的梦想是用"指尖改变世界",励志做"中国的乔布斯".
Java学院
Java学院,学院的每一个学生也很牛逼,他们的梦想是通过代码改变自己,终极目标:"瞬间高富帅,赢取白富美"。
网页UI学院
网页UI学院,又称女神学院。学院每个学生的梦想是:设计出能改变世界的UI界面,成为其他两大学院男生心目中的女神。
iOS学院史上最具逼格
iOS学院，又称大神学院，学院内优秀学员比比皆是,不断挑战着业界薪资神话。学院的每一个学生都十分的牛逼,他们的梦想是用"指尖改变世界",励志做"中国的乔布斯"。
Java学院史上最具实力
Java学院,学院的每一个学生也很牛逼,他们的梦想是通过代码改变自己,终极目标:"瞬间高富帅,赢取白富美"。
UI设计学院史上最具美感
UI学院,又称女神学院。学院每个学生的梦想是:设计出能改变世界的UI界面,成为其他两大学院男生心目中的女神。
css
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;
}
}