页面显示照片样式为瀑布流：
上面的div个数可以按照自己安排进行划分。img的分布可以使用模板标签以及自定义模板函数进行排布：
自定义模板函数实现可以看，最后几列：python---django中模板渲染
def img(req):
img = models.Img.objects.all() return render(req,"images.html",{'img':img})
服务端数据分发
from django import template register = template.Library() @register.filter
def formod(count,mod):
return count%mod
自定义模板函数
<div class="w">
<div class="item">
{% for item in img %}
{% if forloop.counter|formod: == %}
<img src="{{ item.src }}" alt="">
{% endif %}
{% endfor %}
</div>
<div class="item">
{% for item in img %}
{% if forloop.counter|formod: == %}
<img src="{{ item.src }}" alt="">
{% endif %}
{% endfor %}
</div>
<div class="item">
{% for item in img %}
{% if forloop.counter|formod: == %}
<img src="{{ item.src }}" alt="">
{% endif %}
{% endfor %}
</div>
<div class="item">
{% for item in img %}
{% if forloop.counter|formod: == %}
<img src="{{ item.src }}" alt="">
{% endif %}
{% endfor %}
</div>
</div>
前端使用模板函数
下面开始回顾JavaScript：JavaScript中函数和类
记住：尽量少使用全局函数，因为项目中可能会在某些你自己都不知道的地方修改了这个变量的原来数据
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.w{
width: 1000px;
margin: auto;
} .item{
width: %;
float: left;
}
{#图片默认大小是按照自己的大小来排序#}
.item img{
width: %;
}
</style>
</head>
<body> <div class="w">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div> </body>
</html>
HTML代码部分
NID = ;
Flag = true;
LastPosition = ; $(function(){
initImg(); $(window).scroll(function(){
var bodyTop = $("body").scrollTop();
var docHg = $(document).height();
var winHg = $(window).height(); var offset = docHg - bodyTop - winHg;
if(offset < ){
NID += ;
if(Flag){
initImg();
}
}
})
}) function initImg(){
$.ajax({
url:'/get_images.html',
type:"GET",
data:{nid:NID},
dataType:"json",
success:function (data) {
if(!data.status){
Flag = false;
return;
}
var img_list = data.data;
$.each(img_list, function (index, v) {
//console.log(i,v) //i索引0开始 v字典（对象）
var mod = (index+LastPosition)%; var img = '<img src="'+v.src+'" alt="'+v.title+'">'
var img = document.createElement('img') //document.createElement("big"); // 通过 DOM 创建新元素
img.src=v.src
img.title=v.title $(".item")[mod].appendChild(img)
console.log(mod)
if(index+ == img_list.length){
NID = v.id;
LastPosition = mod + ;
}
});
}
})
}
js使用ajax获取数据（使用了全局变量）
下面是使用类，将数据和函数进行封装，来避免全局变量干扰：
<script src="/static/jquery.js"></script>
<script> //封装为类，防止全局变量出现
function ScrollImg(){
this.NID = ;
this.LastPosition = ;
this.Flag = true;
this.initImg = function(){
// this = obj
var that = this; $.ajax({
url:'/get_images.html',
type:"GET",
data:{nid:that.NID},
dataType:"json",
//这里面还有一个函数属于ajax对象，所以若是在这里面出现this，则不会是外面的obj对象，所以下面的数据NID，LastPosition，Flag不是上面的对象数据
//要想调用obj对象数据，我们需要传递这个对象，而且为了避免this冲突，我们可以将obj对象赋值给一个变量（例如：that），则在ajax中就可以进行使用了（传递给ajax，ajax对象本身没有这个数据就会往上层作用域去取数据）
success:function (data) {
if(!data.status){
that.Flag = false;
return;
}
var img_list = data.data;
$.each(img_list, function (index, v) {
//console.log(i,v) //i索引0开始 v字典（对象）
var mod = (index+that.LastPosition)%; var img = '<img src="'+v.src+'" alt="'+v.title+'">'
var img = document.createElement('img') //document.createElement("big"); // 通过 DOM 创建新元素
img.src=v.src
img.title=v.title $(".item")[mod].appendChild(img)
console.log(mod)
if(index+ == img_list.length){
that.NID = v.id;
that.LastPosition = mod + ;
}
});
}
})
}; this.scrollEvent = function(){
//this = obj
var that = this; $(window).scroll(function(){ //又是一个函数，这个函数的调用者也不是我们，所以我们不能单纯使用this
var bodyTop = $("body").scrollTop();
var docHg = $(document).height();
var winHg = $(window).height(); var offset = docHg - bodyTop - winHg;
if(offset < ){
that.NID += ;
if(that.Flag){
that.initImg();
}
}
})
}
} //不含全局变量 此处进行调用该对象
$(function(){
var obj = new ScrollImg();
obj.initImg();
obj.scrollEvent();
}) </script>
补充：scroll事件：
#var winTop = $("body").scrollTop(); $(window).scrollTop(); $(document).scrollTop(); 当前页面上界偏移量
#var docHg=$(document).height(); 当前文档的高度
#var winHg=$(window).height(); 当前浏览器窗口高度（客户区）
#var off=$(this).offset().top; 某个元素的上界偏移量
#var hgt=$(this).height(); 某个元素高度
#其中特别注意$("body").height();和$(document).height();
#两个并不是一致的，因为body中有些元素的位置可能是相对位置，导致body的高度并不是准确的高度
#所以要获取整个文档高度，需要使用$(document).height();
JavaScript中作用域回顾（避免使用全局变量）（瀑布流的实现）（scroll事件）以及Django自定义模板函数回顾的更多相关文章
-
从零开始讲解JavaScript中作用域链的概念及用途
从零开始讲解JavaScript中作用域链的概念及用途 引言 正文 一.执行环境 二.作用域链 三.块级作用域 四.其他情况 五.总结 结束语 引言 先点赞,再看博客,顺手可以点个关注. 微信公众号搜 ...
-
JavaScript中作用域和作用域链的简单理解（变量提升）
通过阅读<JS高级程序设计>这本书,对js中的作用域和作用域链知识有了初步的了解和认识,准备成笔记供大家参考,笔记中字数比较多,但个人认为叙述的挺详细的,所以希望读者耐心看.再者,本人了解 ...
-
js中masonry与infinitescroll结合 形成瀑布流
后台:(有点问题 page应该从1开始 而不是从0开始) public function actionExperts() { $top=5; $page=em ...
-
在javascript中的浏览器兼容问题以及兼容浏览器汇总（默认事件，阻止冒泡，事件监听。。。）以及解决方式详解
在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级 渐进增强(progressive enhancement): 针对低版本浏览器进 ...
-
python---django中模板渲染（csrf令牌使用，自定义模板函数）
使用终端,可以更方便的去实验,但是没有提示信息: 在项目目录下: D:\MyPython\day23\HelloWorld>python manage.py shell 开始实验: >&g ...
-
JavaScript中---作用域
作用域: 变量还有函数作用的范围. 浏览器的内核主要有两大功能,一个是渲染页面,另一个就是我们的JavaScript的解释器了. 我们主要来说说JavaScript解释器,在解析时是怎么样的工作原理. ...
-
JavaScript中作用域和作用域链解析
学习js,肯定要学习作用域,js作用域和其他的主流语言的作用域还存在很大的区别. 一.js没有块级作用域. js没有块级作用域,就像这样: if(){ : console.log(a) //输出100 ...
-
理解JavaScript中作用域链的关系
javascript里的关系又多又乱.作用域链是一种单向的链式关系,还算简单清晰:this机制的调用关系,稍微有些复杂:而关于原型,则是prototype.proto和constructor的三角关系 ...
-
javascript中作用域
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
-
Session for SSRS Report of Microsoft Dynamics AX
Session for SSRS Report of Microsoft Dynamics AX 版权声明:本文为博主原创文章,未经博主允许不得转载. Contract •A data contrac ...
-
最简MacOs10.8安装
虚拟机中安装Mac Os X的方法网上很多很多,但是对刚接触的朋友来讲肯定不是一件容易的事,这个自己深有体会,包括去年已经装好过,今年再找教程安装都装不起来,期间还出现了各种问题,幸好去年装好之后备份 ...
-
淘宝(阿里百川)手机客户端开发日记第六篇 Service详解(六)
Service和Thread的关系 不少初学者都可能会有这样的疑惑,Service和Thread到底有什么关系呢?什么时候应该用Service,什么时候又应该用Thread? 答案是Service和T ...
-
Qt之自定义界面（右下角冒泡）
简述 网页右下角上经常会出现一些提示性的信息,桌面软件中也比较常见,类似360新闻.QQ消息提示一样! 这种功能用动画实现起来很简单,这节我们暂时使用定时器来实现,后面章节会对动画框架进行详细讲解. ...
-
cdoj 1252 24点游戏 dfs
24点游戏 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/1252 Descr ...
-
Windows下sass的安装
sass依赖Ruby,所以,首先得先安装个Ruby 安装步骤: 1.安装Ruby的时候,勾上Add Ruby executables to your PATH(添加环境变量) 2.安装好Ruby之后, ...
-
【转】Swagger2 添加HTTP head参数
大家使用swagger往往会和JWT一起使用,而一般使用jwt会将token放在head里,这样我们在使用swagger测试的时候并不方便,因为跨域问题它默认不能自定义head参数.然后自己去网上找, ...
-
nginx 详解反向代理负载均衡
什么是反向代理负载均衡 使用代理服务器可以将请求转发给内部的Web服务器,使用这种加速模式显然可以提升静态网页的访问速度.因此也可以考虑使用这种技术,让代理服务器将请求 均匀转发给多台内部Web服务器 ...
-
STL - vector容器
1Vector容器简介 vector是将元素置于一个动态数组中加以管理的容器. vector可以随机存取元素(支持索引值直接存取, 用[]操作符或at()方法,这个等下会详讲). vector尾部添加 ...
-
Docker For Mac没有docker0网桥
在使用Docker时,要注意平台之间实现的差异性,如Docker For Mac的实现和标准Docker规范有区别,Docker For Mac的Docker Daemon是运行于虚拟机(xhyve) ...