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
