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

 職場小白，有不正確的或者有更多的可以提意見 耶