移动端列表页布局
Posted 青幽草
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端列表页布局相关的知识，希望对你有一定的参考价值。
效果图如下：
1 <header> 2 <h1><span class="backbtn" onclick="javascript:history.go(-1);"></span>视频列表</h1> 3 <a href="login.html" class="myperson"></a> 4 </header> 5 <div class="list-wrap"> 6 <section> 7 <a href="video.html"> 8 <div class="banner-video"> 9 <span> 10 <img src="images/btn.png" alt="播放按钮" /> 11 </span> 12 <img src="images/2.jpg" class="img-responsive"/> 13 </div> 14 <div class="intro-video"> 15 <h1>堂在线是知名的中文MOOC平台.1000多万大学生选 择在学堂在线观看课程视频.免费提供来自北大, 斯坦福, 麻省理工等知名高校12大学科门类1000余门课程的在线学习.</h1> 16 <time>2017年12月5日</time> 17 </div> 18 </a> 19 </section> 20 <section> 21 <a href="video.html"> 22 <div class="banner-video"> 23 <span> 24 <img src="images/btn.png" alt="播放按钮" /> 25 </span> 26 <img src="images/2.jpg" class="img-responsive"/> 27 </div> 28 <div class="intro-video"> 29 <h1>儿童绘画水彩素描基础班中国插画师的摇篮。</h1> 30 <time>2017年12月5日</time> 31 </div> 32 </a> 33 </section> 34 <section> 35 <a href="video.html"> 36 <div class="banner-video"> 37 <span> 38 <img src="images/btn.png" alt="播放按钮" /> 39 </span> 40 <img src="images/3.jpg" class="img-responsive"/> 41 </div> 42 <div class="intro-video"> 43 <h1>儿童绘画水彩素描基础班中国插画师的摇篮。</h1> 44 <time>2017年12月5日</time> 45 </div> 46 </a> 47 </section> 48 <section> 49 <a href="video.html"> 50 <div class="banner-video"> 51 <span> 52 <img src="images/btn.png" alt="播放按钮" /> 53 </span> 54 <img src="images/2.jpg" class="img-responsive"/> 55 </div> 56 <div class="intro-video"> 57 <h1>儿童绘画水彩素描基础班中国插画师的摇篮。</h1> 58 <time>2017年12月5日</time> 59 </div> 60 </a> 61 </section> 62 63 </div>
1 /* 移动端样式重置 ========================================= */ 2 @charset "utf-8"; 3 * { 4 margin: 0; 5 padding: 0; 6 } 7 article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { 8 display: block; 9 } 10 html { 11 font-size: 12px; 12 color: #666; 13 font-family: \'Microsoft Yahei\' \'Helvetica Neue\', Helvetica, STHeiTi, Arial, sans-serif; 14 } 15 body{ 16 height: 100%; overflow-x: hidden; -webkit-overflow-scrolling: touch; 17 } 18 audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } 19 img { 20 border: none; 21 vertical-align: middle; 22 } 23 a { 24 text-decoration: none; 25 outline: none; 26 /*设置的tap A标签的时候出现的黑色高亮*/ 27 -webkit-tap-highlight-color: transparent; 28 } 29 a:active { outline: 0; } 30 .clearfix { 31 zoom: 1; 32 } 33 .clearfix:before, 34 .clearfix:after { 35 content: \'\'; 36 display: table; 37 } 38 .clearfix:after { 39 clear: both; 40 } 41 em { 42 font-style: normal; 43 } 44 input { 45 outline: none; 46 } 47 input[type="text"], 48 input[type="tel"] { 49 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 50 } 51 /* 去除iphone ipad 设备默认按钮样式 */ 52 input[type="button"], input[type="submit"], input[type="reset"] { 53 -webkit-appearance: none; 54 border-radius: 0; 55 } 56 input::-webkit-outer-spin-button, 57 input::-webkit-inner-spin-button { 58 -webkit-appearance: none !important; 59 margin: 0; 60 } 61 input::-moz-placeholder, textarea::-moz-placeholder { color: #cccccc; } 62 input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #cccccc; } 63 input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #cccccc; } 64 65 66 /* 67 68 69 70 头部导航 71 */ 72 73 header { 74 height: 40px; 75 line-height: 40px; 76 background-color: #373b3e; 77 78 } 79 80 header h1 { 81 font-weight: normal; 82 text-align: center; 83 font-size: 16px; 84 color: #fff; 85 font-family: \'Franklin Gothic Medium\', \'Arial Narrow\', Arial, sans-serif; 86 } 87 .myperson { 88 display: block; 89 position: absolute; 90 top: 10px; 91 right: 10px; 92 width: 30px; 93 height: 30px; 94 background: url(../images/) no-repeat; 95 background-size: 20px 20px; 96 } 97 98 .backbtn { 99 display: block; 100 float: left; 101 margin-top: 5px; 102 margin-left: 10px; 103 width: 25px; 104 height: 25px; 105 background: url(../images/icon-headback－left.png) no-repeat left center; 106 background-size: contain; 107 } 108 109 /* 110 本页 111 */ 112 113 body{ background: #f2f2f2;} 114 a{ color: #666;} 115 .list-wrap { 116 padding: 10px; 117 } 118 .list-wrap section { 119 margin-bottom: 10px; 120 } 121 .banner-video{ 122 position: relative; 123 overflow: hidden; 124 } 125 .img-responsive{ max-width: 100%;} 126 .banner-video span img{ display:block; width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; position: absolute; top: 50%; left: 50%; z-index: 2;} 127 .intro-video{ padding: 10px; background:#fff;} 128 .intro-video h1{margin-bottom: 5px; font-size: #666; font-weight: normal; max-height: 40px; font-size: 13px; overflow: hidden;} 129 .intro-video time{ font-size: 12px; color:#999;}
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
//自动加载数据
var scrollTop; //获取滚动条到顶部的距离
var scrollHeight; //获取文档区域高度
var windowHeight; //获取滚动条的高度
var flag = true; //加载数据标志 防止出现两次加载bug问题
$(window).scroll(function(){
scrollTop = $(this).scrollTop();
scrollHeight = $(document).height();
windowHeight = $(this).height();
if(scrollTop + windowHeight >= scrollHeight-200 && flag == true ){
$.ajax({
url:\'1.txt\',
// data:{},
method:\'GET\',
// dataType:\'\',
beforeSend:function(){
flag = false;
},
success:function(data){
if( data ){
console.log(data);
var html=`<section>
<a href="video.html">
<div class="banner-video">
<span>
<img src="images/btn.png" alt="播放按钮" />
</span>
<img src="images/2.jpg" class="img-responsive"/>
</div>
<div class="intro-video">
<h1>儿童绘画水彩素描基础班中国插画师的摇篮。</h1>
<time>2017年12月5日</time>
</div>
</a>
</section>
<section>
<a href="video.html">
<div class="banner-video">
<span>
<img src="images/btn.png" alt="播放按钮" />
</span>
<img src="images/3.jpg" class="img-responsive"/>
</div>
<div class="intro-video">
<h1>儿童绘画水彩素描基础班中国插画师的摇篮。</h1>
<time>2017年12月5日</time>
</div>
</a>
</section>
`;
$(".list-wrap").append(html);
} else {
console.log("错误");
}
},
complete:function(){
flag = true;
}
});
}
});
</script>
以上是关于移动端列表页布局的主要内容，如果未能解决你的问题，请参考以下文章
[Vant] van-tabs标签页吸顶/粘性布局在移动端适配上的一些尝试