js点击加载更多可以增加几条数据的显示

 

<div class="list">
                    <div class="one">
                        <div class="img">
                            <img src="../img/b6c.png"/>
                        </div>
                        <div class="infor">
                            <p class="detail">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
                            <p class="time">2018-6-28</p>
                        </div>
                    </div>
                    <div class="one">
                        <div class="img">
                            <img src="../img/lunbo3.png"/>
                        </div>
                        <div class="infor">
                            <p class="detail">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈啊啊啊啊啊啊啊啊啊啊啊</p>
                            <p class="time">2018-6-28</p>
                        </div>
                    </div>
</div>
<div class="more">加载更多</div>

在一个项目中，需要点击更多，之后显示更多的数据，不是获取当前的页面的高度自动加载的 所以算不上懒加载，是js控制的

上面是一些页面的代码

下面是css样式

.newcenter .detail .list {
     overflow: hidden;
 }
 
 .newcenter .detail .list .one {
     margin-top: 0.2rem;
     height: 1.68rem;
     display: flex;
     justify-content: space-between;
 }
 
 .newcenter .detail .list .one .img {
     width: 1.41rem;
     height: 1.28rem;
 }
 
 .newcenter .detail .list .one .img img {
     width: 1.41rem;
     height: 1.28rem;
 }
 
.newcenter .detail .list .one .infor {
     width: 5.56rem;
     position: relative;
 }
 
 .newcenter .detail .list .one .infor .detail {
     margin-top: 0.1rem;
 }
 
 .newcenter .detail .list .one .infor .detail {
     font-size: 0.18rem;
     font-family: MicrosoftYaHei;
     font-weight: bold;
     color: rgba(97, 97, 97, 1);
 }
 
 .newcenter .detail .list .one .infor .time {
     font-size: 0.18rem;
     font-family: MicrosoftYaHei;
     font-weight: bold;
     color: rgba(173, 173, 173, 1);
     text-align: right;
     position: absolute;
     top: 1.3rem;
    right: 0;
 }
 .newcenter .more{
     width:  2.2rem;
     height: 0.8rem;
     margin: 0 auto;
     font-size: 0.24rem;
     background: #A9010A;
     border-radius: 0.2rem;
     text-align: center;
     line-height: 0.8rem;
     color: #FFFFFF;
     margin-top: 0.5rem;
      }

具体的js的如下：

var arr = $('.detail .list .one').length;    //新闻的长度
   var textArr =[]; //新闻列表信息
   var arr =[];  //每次显示的内容
   var num = 1;  //点击次数

   //获取新闻列表信息
    $('.detail .list .one').each(function(index){
        var t = $(this).html();
        textArr.push(t)
         
    })
    
    //初始化显示的几条新闻信息
    for(var i = 0; i<3;i++){
        var txt = "<div class='one'>"+textArr[i]+"</div>"
        arr.push(txt);
    }
     //页面初始化渲染
    $('.detail .list').html(arr);
    

    //点击加载更多
    $('#more').click(function(){
         num++;
        for(var i = arr.length + 1; i < 3 * num; i++) {
            
            if(arr.length< textArr.length){
                var txt = "<div class='one'>" + textArr[i] + "</div>"
                arr.push(txt)
            }else{
                $(this).html('没有更多了');
                return;
            }
            
        }
        $('.detail .list').html(arr);
         
        
       
    })

 职场小白，有不正确的或者有更多的可以提意见 耶