瀑布流（基於Django）
阿新 • • 發佈：2019-02-04
.get url col end data scrip tee append req
# 後端 from django.shortcuts import render, HttpResponse from django.http import JsonResponse from app01 import models import json from django.db.models import Q def imgs(request): return render(request, ‘img.html‘) def get_imgs(request): nid = request.GET.get(‘nid‘) img_list= models.Img.objects.filter(Q(id__gt=nid)&Q(id__lt=(nid+7))).values(‘id‘, ‘src‘, ‘title‘) # 一次從數據庫取7張圖片 img_list = list(img_list) ret = { ‘status‘: True, ‘data‘: img_list } 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" id="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <script src="/static/jquery-1.12.4.js"></script> <script> $(function () { var obj = new ScrollImg(); obj.fetchImg(); obj.scrollEvent(); }); function ScrollImg() { this.NID = 0; this.LASTPOSITION = 3; this.fetchImg = function () { var that = this; $.ajax({ url: ‘/get_imgs.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.LASTPOSITION + 1) % 4; //console.log(eqv); var tag = document.createElement(‘img‘); tag.src = ‘/‘ + v.src; $(‘#container‘).children().eq(eqv).append(tag); if (index + 1 == img_list.length) { that.LASTPOSITION = eqv; that.NID = v.id; } }) } }) }; this.scrollEvent = function () { var that = this; $(window).scroll(function () { var scrollTop = $(window).scrollTop(); var winHeight = $(window).height(); var docHeight = $(document).height(); if (scrollTop + winHeight == docHeight) { that.fetchImg(); } }) } } </script> </body> </html>
瀑布流（基於Django）