zoukankan      html  css  js  c++  java
  • ajax请求数据动态渲染信息流(每隔两条数据插入一个div或者一条信息)

     1  var page = 0;
     2     var lock = true;
     3     $(window).scroll(function() {
     4         //获取#gg这个div到顶部的距离
     5         var mTop = $('#gg')[0].offsetTop;
     6         //获取窗口的高度
     7         var sTop = $(window).scrollTop();
     8         //获取滚动时#gg这个div距离顶部的距离
     9         var result = mTop - sTop;
    10         // console.log(result);
    11         if (result < 867 && lock === true) {
    12             page += 1;
    13             lock = false;
    14             //判断page的页码数
    15             if (page <= 3) {
    16                 var data = {
    17                     page: page,
    18                     limit: 10,
    19                     type_id: 0,
    20                 }
    21                 $.ajax({
    22                     type: "get",
    23                     url: 'url请求地址' + page(页数) + '&limit&typeid',
    24                     data: data,
    25                     dataType: "json",
    26                     success: function(data) {
    27                         data = data.data
    28                             // console.log(data);
    29                         var str = '';
    30                         $.each(data, function(index, val) {
    31                             if ((index + 1) % 2 === 0) { //判断数据插入的位置
    32                                 //全局的空数组----GG---这个是存放数另一个接口请求数来的数据
    33                                 $.each(GG, function(i, item) {
    34                                     //循环渲染GG里面的数据
    35                                     str += '<li class="hyli">' +
    36                                         '<div class="picbox">' +
    37                                         '<a target="_blank" href="' + item.curl + '">' +
    38                                         '<img src="' + item.img + '" alt="' + item.title + '">' +
    39                                         '</a>' +
    40                                         '</div>' +
    41                                         '<div class="info">' +
    42                                         ' <a target="_blank" href="' + item.curl + '">' +
    43                                         '<span class="title">' + item.title + '</span>' +
    44                                         '</div>' +
    45                                         '<p>' + item.desc + '</p>' +
    46                                         '</a>' +
    47                                         '</div>' +
    48                                         '</li>'
    49                                 })
    50                             }
    51                             //循环渲染data里面的数据
    52                             str += '<li class="hyli">' +
    53                                 '<div class="picbox">' +
    54                                 '<a target="_blank" href="' + val.url + '">' +
    55                                 '<img src="' + val.litpic + '" alt="' + val.title + '">' +
    56                                 '</a>' +
    57                                 '</div>' +
    58                                 '<div class="info">' +
    59                                 ' <a target="_blank" href="' + val.url + '">' +
    60                                 '<span class="title">' + val.title + '</span>' +
    61                                 '<div class="date">于' + val.pubdate + '发表' +
    62                                 '<span>知识</span>' +
    63                                 '</div>' +
    64                                 '<p>' + val.description + '</p>' +
    65                                 '</a>' +
    66                                 '</div>' +
    67                                 '</li>'
    68                         });
    69                         $('.yc_ul').append(str); //全部放进.yc_ul里面
    70                         lock = true;
    71                     }
    72                 });
    73             } else {
    74                 //当page大于3时就解结束请求
    75                 return false
    76             };
    77             fun1() //调用另一个js文件里的方法
    78 
    79         }
    80 
    81     })
  • 相关阅读:
    python数据结构树和二叉树简介
    python双向链表的实现
    Python单向链表的实现
    栈和队列数据结构的基本概念及其相关的Python实现
    模型融合目录
    算法汇总目录
    一个完整的机器学习目录
    python基础-面向对象opp
    Python random模块
    python-字符串前面添加u,r,b的含义
  • 原文地址:https://www.cnblogs.com/520yh/p/13518708.html
Copyright © 2011-2022 走看看