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

 

posted @ 2020-08-17 17:08  YH丶浩  阅读(203)  评论(0)    收藏  举报