瀑布流方式三（方式二的升級版）
阿新 • • 發佈：2018-06-21
charset 圖片 標簽 get 鼠標滾輪 img type Go 變量
此版本，是方式二的升級版，一，將全局變量封裝到函數內，二，添加滾輪，可以持續取數據
url文件
from django.contrib import admin from django.urls import path from app01 import views urlpatterns = [ path(‘admin/‘, admin.site.urls), path(‘img.html/‘, views.img), path(‘get_img.html/‘, views.get_img), ]
views文件
from django.shortcuts importrender,HttpResponse from django.http import JsonResponse from app01 import models def img(request): return render(request,‘img.html‘) def get_img(request): import json nid = request.GET.get(‘nid‘) img_list = models.Img.objects.filter(id__gt=nid).values(‘id‘,‘src‘,‘title‘) #獲取數據庫的中數據img_list = list(img_list) ret = {‘status‘:True,‘data‘:img_list} # return HttpResponse(json.dumps(ret)) return JsonResponse(ret)
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"> <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> </div> <script src="/static/jquery-3.3.1.js"></script> <script> $(function () { var obj = new ScrollImg() obj.initImg() obj.scrollEvent() }) function ScrollImg() { this.nid=0; this.lastPostion=3; var that = this this.initImg = function () { $.ajax({ url:‘/get_img.html‘, type:‘GET‘, data:{‘nid‘:that.nid}, dataType:‘JSON‘, success:function (arg) { var img_list = arg.data $.each(img_list,function (index,v) { var eqv = (index+that.lastPostion +1) % 4; console.log(eqv) {#eqv就是圖片的索引位置，加that.lastpostion+1 是為了第二次取到數據後，緊接繼續拜訪#} {# index是循環的索引，v是去到的值（字典形式的）#} var tag = document.createElement(‘img‘); {#創建一個img標簽，標簽的地址是‘/‘+v.src，然後將標簽添加到對應的子標簽#} tag.src=‘/‘+v.src $(‘.w‘).children().eq(eqv).append(tag); {# 當循環到最後一個的時候，將圖片ID復制給 NID #} if(index+1 == img_list.length){ {#that.nid = v.id#} {# that.nid是向後臺發送的nid,因為圖片少，所以需要註掉先 #} that.lastPostion = eqv } }) } }) }; this.scrollEvent = function () { $(window).scroll(function () { {# 什麽時候滾輪到達最底部 #} {# 文檔高度：可以理解為body高度#} var docHeight = $(document).height() {# 窗口高度：屏幕窗口#} var winHeight = $(window).height() {# 滾動條滑動的高度#} var scrollTop = $(window).scrollTop() if(winHeight+scrollTop == docHeight){ that.initImg(); } }) } } {# 設置NID為全局變量，第一次ajax發送時是0.這時ajax只會從數據庫取一部分數據，等滾輪劃到底部，再出發ajax,再繼續取值#} {# 下面可以監聽鼠標滾輪動作，當滾輪到最底部時，繼續執行initImg函數，然後到數據庫中再取一次 #} </script> </body> </html>
瀑布流方式三（方式二的升級版）