1.通过ajax方式实现滚动条瀑布流
(1)创建数据库:xixi\pubu\models.py
from django.db import models #Img图片表 class Img(models.Model): src = models.FileField(max_length=32,verbose_name='图片路径',upload_to='static/upload') #FileField上传文件，upload_to指定上传路径 title = models.CharField(max_length=16,verbose_name='标题') summary = models.CharField(max_length=128,verbose_name='简介') class Meta: verbose_name_plural = '图片' def __str__(self): return self.title
数据库：
+----------------------------+ | Tables_in_xi | +----------------------------+ | auth_group | | auth_group_permissions | | auth_permission | | auth_user | | auth_user_groups | | auth_user_user_permissions | | django_admin_log | | django_content_type | | django_migrations | | django_session | | pubu_img | +----------------------------+
图片表：pubu_img
+----+---------------------------------+--------------+-----------------+ | id | src | title | summary | +----+---------------------------------+--------------+-----------------+ | 1 | static/upload/1_1610.JPG | 西瓜 | 夏天必备 | | 2 | static/upload/1_336_o8hpAYb.JPG | 梨 | 润嗓子 | | 3 | static/upload/1_438.JPG | 白雪 | 一只喵 | | 4 | static/upload/1_1164.JPG | 饺子 | 好吃 | | 5 | static/upload/1_193_t8jcwXm.JPG | 皮卡丘 | 宠物小精灵 | | 6 | static/upload/1_1202.JPG | 不二 | 一本书 | | 7 | static/upload/1_350.JPG | 油焖大虾 | 一道菜 | +----+---------------------------------+--------------+-----------------+
(2)URL：E:\python\xixi\xixi\urls.py
from django.conf.urls import url from django.contrib import admin from pubu import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^imgs.html$', views.imgs), #照片页面显示 url(r'^get_imgs.html$', views.get_imgs), #获取照片 ]
(3)视图函数：xixi\zuhe\views.py
from django.shortcuts import render from pubu import models from django.http import JsonResponse #JsonResponse内部会执行Json.dumps def imgs(request): #照片页面显示函数 return render(request,'img.html') def get_imgs(request): #获取照片函数 nid = request.GET.get('nid') #获取到nid img_list = models.Img.objects.filter(id__gt=nid).values('id','src','title') #按照上次取到的nid开始往下取，给用户返回json数据包括(id,src,title) img_list = list(img_list) # ret = { 'status': True, 'data': img_list } return JsonResponse(ret) #返回到前端
(4)页面：xixi\templates\img.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .w{ width: 1000px; margin: 0 auto; } .item{ width: 25%; {#每一个照片宽度占百分之25#} float: left; } .item img{ width: 100%; } </style> </head> <body> <div class="w" id="container"> {#设置4个div，每一个div占一列，一排占4张照片#} <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(); //通过new调用ScrollImg类里的function()函数，this=obj(NID和LASTPOSITION) obj.fetchImg(); //调用fetchImg()函数，这个函数里的this=obj(NID和LASTPOSITION) obj.scrollEvent(); //调用滚轮scrollEvent()函数 }); function ScrollImg() { //第一步：当初次加载时候执行ScrollImg() this.NID = 0; //NID记录每次读到照片的数量显示出来：默认是0 this.LASTPOSITION = 3; //每次循环最后的位置：默认是3 this.fetchImg = function () { //调用fetchIm var that = this; //将当前的this对象复制一份到that变量中 $.ajax({ //通过ajax把照片获取到 url: '/get_imgs.html', type: 'GET', data:{nid:that.NID}, //把NID传到后端 dataType: 'JSON', success:function (arg) { //arg是整个后端传来的内容 var img_list = arg.data; //arg.data是列表,,赋值给img_list=[{"src":"static/upload/1_336_o8hpAYb.JPG","title":"梨","id":2},{},{}] $.each(img_list,function (index,v) { //对img_list循环的里面每一个元素是一个一个的字典 img_list(index是索引0,v是img_list=[{"src":"static/upload/1_336_o8hpAYb.JPG","title":"梨","id":2},{},{}]) var eqv = (index + that.LASTPOSITION + 1) % 4; //求余(index(1)+that.LASTPOSITION(3)+1)/4余0的顺序赋值给eqv //console.log(eqv); var tag = document.createElement('img'); //生成img标签赋值给tag：<img src=""> tag.src = '/'+ v.src; //生成整体tag标签，v.src是图片路径：<img src="static/upload/1_336_o8hpAYb.JPG"> $('#container').children().eq(eqv).append(tag); //找container下面的孩子4个div通过eqv 0 1 2 3的顺序把创建的tag标签放进去 //当循环最后一张图片时，将图片的ID赋值给NID if (index + 1 == img_list.length) { //索引加一等于长度的时候 that.LASTPOSITION = eqv; //记录每次循环最后一次位置 that.NID = v.id; //v.id是2 } }) } }) }; this.scrollEvent = function () { //调用scrollEvent //当滚轮达到最底部时，从新执行initImg函数() var that = this; //将当前的this对象复制一份到that变量中 $(window).scroll(function () { //绑定事件 //什么时候达到最底部？ //文档高度(body占多高) //窗口高度(内容站多高) //窗口高度和文档高度差的是滚动条可滑动的高度 //窗口高度+滚轮滑动的高度=文档高度就是到达最底部了 var scrollTop = $(window).scrollTop(); //滑轮滚动的高度 var winHeight = $(window).height(); //获取窗口高度 var docHeight = $(document).height(); //获取文档高度 if (scrollTop + winHeight == docHeight) { //如果窗口高度+滚轮滑动的高度=文档高度就是到达最底部了 //console.log(1); that.fetchImg(); } }) } } </script> </body> </html>
访问：http://127.0.0.1:8080/imgs.html
