4.瀑布流js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .w{ width: 1000px; margin: 0 auto; } .item{ width: 25%; float: left; } .item img { width: 100%; } </style> </head> <body> <div>美女</div> {# <div class="w">#} {# {% for item in image_list %}#} {# <div class="item">#} {# <img src="/{{ item.name }}">#} {# <div>{{ item.title}}</div>#} {# </div>#} {# {% endfor %}#} {# </div>#} <div class="w" id="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <script src="/static/js/jquery-3.1.1.js"></script> <script> $(function () { var obj = new ScrollImg(); # 当实例一个函数对象之后，this就是代表这个对象 obj.initImg(); obj.scrollEvent(); }); function ScrollImg(){ this.nid = 0; this.lasePosition = 3; this.initImg = function () { // this == obj var that = this; # 内部函数要使用外部的this是需要重新定义，否则this代表的是window的this $.ajax({ url:"/get_img/", type:"GET", dataType:"JSON", data:{"nid": that.nid}, success:function (arg) { var img_list = arg.data; $.each(img_list,function (index,v) { var eqv = (index + that.lasePosition + 1) % 4; # 使用that代表this tag = document.createElement("img"); tag.src = "/" + v.name; $("#container").children().eq(eqv).append(tag) // 当循环到最后一个的时候，将图片id赋值给NID if (index + 1 == img_list.length){ that.nid = v.id; # 如果图片数量不够时可以考录注释掉这句 that.lasePosition = eqv; # 主要为了标记最后一个图片结束的位置，刷新后从这里在开始 } }) } }) }; this.scrollEvent= function () { //this == obj var that = this $(window).scroll(function () { //什么时候到达底部 //文档高度 var docHeight = $(document).height(); //窗口高度 var winHeight = $(window).height(); //滚动条滑动的高度， var scrollTop = $(window).scrollTop(); console.log(docHeight,winHeight,scrollTop); if (winHeight + scrollTop + 1 >= docHeight){ that.initImg(); } }) } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .w{ width: 1000px; margin: 0 auto; } .item{ width: 25%; float: left; } .item img { width: 100%; } </style> </head> <body> <div>美女</div> {# <div class="w">#} {# {% for item in image_list %}#} {# <div class="item">#} {# <img src="/{{ item.name }}">#} {# <div>{{ item.title}}</div>#} {# </div>#} {# {% endfor %}#} {# </div>#} <div class="w" id="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <script src="/static/js/jquery-3.1.1.js"></script> <script> $(function () { initImg(); scrollEvent(); }); var NID = 0; var LASEPOSITION = 3; function initImg() { $.ajax({ url: "/get_img/", type: "GET", dataType: "JSON", data: {"nid": NID}, success: function (arg) { var img_list = arg.data; $.each(img_list, function (index, v) { var eqv = (index + LASEPOSITION + 1) % 4; tag = document.createElement("img"); tag.src = "/" + v.name; $("#container").children().eq(eqv).append(tag); // 当循环到最后一个的时候，将图片id赋值给NID if (index + 1 == img_list.length) { NID = v.id; LASEPOSITION = eqv; } }) } }) } // 当滚轮到达底部时，执行 initImg() function scrollEvent() { $(window).scroll(function () { //什么时候到达底部 //文档高度 var docHeight = $(document).height(); //窗口高度 var winHeight = $(window).height(); //滚动条滑动的高度， var scrollTop = $(window).scrollTop(); console.log(docHeight, winHeight, scrollTop); if (winHeight + scrollTop + 1 >= docHeight) { console.log(1); initImg() } }); } </script> </body> </html>
一共有两种形式，尽量选择第一种吧
def images(request): return render(request, "images.html") def get_img(request): nid = request.GET.get("nid") image_list = models.Images.objects.filter(id__gt=nid).values("name", "id", "title") image_list = list(image_list) ret = { "status": True, "data": image_list } return HttpResponse(json.dumps(ret))
urlpatterns = [ path('admin/', admin.site.urls), url(r'^images/$', views.images), url(r'^get_img/$', views.get_img), url(r'^video-(?P<classification_id>(\d+))-(?P<level_id>(\d+))-(?P<status>(\d+))/$', views.video), url(r'^video2-(?P<direction_id>(\d+))-(?P<classification_id>(\d+))-(?P<level_id>(\d+))/$', views.video2, name="video2"), ]
