移动端列表页布局

效果图如下：

 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;}

View Code

  <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>