<!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>this is pic</div> <div class="w" id="imgs"> <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 () { addimg(); stroll1() }); var fin_num=3; function addimg() { console.log('1'); $.ajax( { url: '/index1', type: 'GET', data: {'nid': 100}, dataType: 'JSON', success: function (arg) { var dict = arg.data; console.log('2', dict); $.each(dict, function (index, v) { var num = (index +1 +fin_num) % 4; console.log(num); var tag = document.createElement('img'); tag.src = '/' + v.src; $('#imgs').children().eq(num).append(tag); if(index+1== dict.length){ fin_num=num } }) } }) } function stroll1() { $(window).scroll(function () { var wendang = $(document).height(); var hualun = $(window).scrollTop(); var chuangkou = $(window).height(); if (chuangkou + hualun == wendang) { addimg() } }) } </script> </body> </html>
from django.shortcuts import render,HttpResponse from django.http import JsonResponse # Create your views here. from app01 import models import json def index(request): return render(request, 'index.html') def index1(request): nid=request.GET.get('nid') print(nid) imgs=models.Img.objects.filter(id__lt=nid).values('id','src','title')#jquery对象 imgs=list(imgs) print(imgs) ret = { 'status': True, 'data': imgs } return JsonResponse(ret,safe=False)