Django+ajax实现页面底部加载
2015-08-04 11:29
483 查看
Django+ajax实现页面底部加载
需求:展示图片,当滚动条拖到页面底部时加载一部分图画。问题:photo的展示使用的是django的QuerySet,对于ajax如何加载非常头痛,还专门补了一下js。
解决思路:用的取巧的办法,把photo先分页,然后ajax的load方法加载下一个页面的photo部分到当前页面来。
分页
第一步是把photo的QuerySet分页展示,我这里直接用127.0.0.1:8000/x/的url,所以在urls.py里这样写url(r'^(?P<page>\d+)/$',index,name='分页'),
每页加载的数量改了好几次,最后决定少一点,定在5,那么需要根据page来分割QuerySet取得相对应的图片,然而QuerySet是无法排序的,先用list转换成列表,然后再切片。
views.py
def index(request,page=0): if request.method=='POST': ... else: photos=list(Photo.objects.filter(is_show=True).order_by('-id'))[int(page)*5:(int(page)+1)*5] return render_to_response('index.html',RequestContext(request,{'photos':photos}))
这样每页展示的图片就只有5张。
底部加载
一般当页面滑动到底部进行操作的代码结构类似这样:$(window).scroll(function () { var scrollTop = $(this).scrollTop();//滚动条滚动的距离 var scrollHeight = $(document).height();//整个html页面高度 var windowHeight = $(this).height();//可视页面的高度 if (scrollTop + windowHeight == scrollHeight) { //DO SOMETHING } });
写到这里我又停下来再理了一下思路,要获得下一个页面的图片,首先要知道下一页的url,而这个加载本身是发生在主页,也就是没有/x/这个部分,又要分情况处理了。
var url=window.location.href;//获取当前页面链接 var cuts=url.split('/');//分隔,获取页码 if(cuts.length<5){ var cur_page_num=1; }else{ var cur_page_num=parseInt(cuts[3]); }
并且在不断往下拖动过程中需要一个循环自加页码的步骤。
接下来用ajax的load方法获取对应的div,但是load方法必须要加载到一个容器里,于是乎还要先创建一个容器来装新加载的,如果直接加载到原来的div里面会覆盖之前的photo了。
所有photo的装在一个大容器中
<div class='container-fluid grid'> {% block content %} {% endblock %} </div>
在block里面是每一个小的photo div
<div class="grid-item"> ... </div>
为了避免每一次加载覆盖之前的内容,每一次都需要创建一个容器,并且用唯一标示与其他的容器区分开。
因此在js里面这样写:
if (scrollTop + windowHeight == scrollHeight) { var nexturl=cuts[0]+'//'+cuts[1]+cuts[2]+'/'+String(cur_page_num+1)+'/';//拼接下一页的url cur_page_num+=1;//自加1 //alert(cur_page_num); var newnode=document.createElement("div"); newnode.setAttribute("class", "container-fluid grid"); newnode.setAttribute("id","new"+String(cur_page_num)); document.body.appendChild(newnode); $('#new'+String(cur_page_num)).load(nexturl+' .grid-item'); }
每一次下滑拖到底部时,页码都会自加1,这样就避免了只能加载下一页的情况,新创建的div同样有class=’container-fluid grid’,和前面的保持样式一致,另外增加一个id=new+页码,使用load方法加载到这个新的容器中。
至此整个加载过程基本实现。
相关文章推荐
- 利用Google Earth制作DEM
- Algorithms—215.Kth Largest Element in an Array
- win7下安装Django
- Algorithms—216.Combination Sum III
- cloudfoundry上搭建go服务端
- ceph存储 Google perftools工具内存检测以及性能分析
- Percolator Google的海量数据增量处理系统
- p3115 高精度练习之减法
- p3117 高精度练习之乘法
- hd3635 Dragon Balls(之前题意翻译有误,已改正)
- Google Chrome源码剖析
- CodeForces 507E Breaking Good(最短路)
- POJ 2262 Goldbach's Conjecture (求解素数的一般筛和线性筛)
- GoF著作中未提到的设计模式(2):Interceptor
- Keil里面无法使用“Go To Definition Of ”跳转到相应的函数解决办法
- 【Go语言】【17】GO语言杂谈
- Category Archives: 机器学习
- 如何给网页加上标题和logo?
- hdoj 3635 Dragon Balls【并查集求节点转移次数+节点数+某点根节点】
- hdu 3996 Gold Mine 最大权闭合子图