74.js---移動端文章的瀑布流的實現。

移動端文章的瀑布流的實現。

  1.首先在前端html頁面已經經過PHP代碼循環徹底數據。

 2.而後在js先所有隱藏，經過判斷滑動到底部，每次加載一部分數據，直到數據所有顯示徹底。

js代碼：

 

// 瀑布流

• //獲取文章的總長度
• var liLength=$(".trim-content-active li").length;
• //規定每次加載的數據條數
• var page=10
• //一共加載多少次---本案無用
• var liH= Math.ceil(liLength/page);
• //加載列表數量的初始值
• var linn=0;
• console.log(liLength,liH);
• for(var i=page;i<liLength+1;i++) {
• //首先顯示十條，其他的都隱藏
• $(".trim-content-active li").eq(i).hide();
• console.log(linn, i,"linn")
• //當滑到手機底部的時候
• $(window).scroll(function () {
• var scrollTop = $(this).scrollTop();
• var scrollHeight = $(document).height();
• var windowHeight = $(this).height();
• if (scrollTop + windowHeight == scrollHeight) {
• //滾動到底部執行事件
• //當總數是10的倍數時
• if(linn<liLength){
• //todo 不該該算條數，應該算次數（如今是算條數）
• linn = linn + page;
• $(".trim-content-active li").eq(linn + page).prevAll().show();
• $(".trim-content-active li").eq(linn + page).show();
• console.log("正在加載中",linn,liLength);

• //當總數沒有規律時
• }else if(linn>liLength){
• //最後一條前面全部的兄弟都顯示
• $(".trim-content-active li").eq(liLength-1).prevAll().show();

• //最後一條顯示

• $(".trim-content-active li").eq(liLength-1).show();

• $(".trim-content-active>li:last-child").after("<section class=\"all-end\">\n" +
      "    <i><img src=\"/public/static/sj/img/icon/icon-end.png\" alt=\"\"></i>\n" +
      "    <p></p>\n" +
      "    <span>已經翻到底啦</span>\n" +
      "</section>")

• }else{
• console.log("跳出")
• }
• }
• });
• }

 本文原創，轉載請標明做者，違者必究！