4.瀑布流js
<!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>美女</div>
{# <div class="w">#}
{# {% for item in image_list %}#}
{# <div class="item">#}
{# <img src="/{{ item.name }}">#}
{# <div>{{ item.title}}</div>#}
{# </div>#}
{# {% endfor %}#}
{# </div>#} <div class="w" id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script src="/static/js/jquery-3.1.1.js"></script>
<script>
$(function () {
var obj = new ScrollImg(); # 当实例一个函数对象之后，this就是代表这个对象
obj.initImg();
obj.scrollEvent(); }); function ScrollImg(){
this.nid = 0;
this.lasePosition = 3;
this.initImg = function () {
// this == obj
var that = this; # 内部函数要使用外部的this是需要重新定义，否则this代表的是window的this
$.ajax({
url:"/get_img/",
type:"GET",
dataType:"JSON",
data:{"nid": that.nid},
success:function (arg) {
var img_list = arg.data;
$.each(img_list,function (index,v) {
var eqv = (index + that.lasePosition + 1) % 4; # 使用that代表this
tag = document.createElement("img");
tag.src = "/" + v.name;
$("#container").children().eq(eqv).append(tag)
// 当循环到最后一个的时候，将图片id赋值给NID
if (index + 1 == img_list.length){
that.nid = v.id; # 如果图片数量不够时可以考录注释掉这句
that.lasePosition = eqv; # 主要为了标记最后一个图片结束的位置，刷新后从这里在开始
}
})
}
})
};
this.scrollEvent= function () {
//this == obj
var that = this
$(window).scroll(function () {
//什么时候到达底部
//文档高度
var docHeight = $(document).height();
//窗口高度
var winHeight = $(window).height();
//滚动条滑动的高度，
var scrollTop = $(window).scrollTop();
console.log(docHeight,winHeight,scrollTop);
if (winHeight + scrollTop + 1 >= docHeight){
that.initImg();
}
})
}
}
</script>
</body>
</html>
<!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>美女</div>
{# <div class="w">#}
{# {% for item in image_list %}#}
{# <div class="item">#}
{# <img src="/{{ item.name }}">#}
{# <div>{{ item.title}}</div>#}
{# </div>#}
{# {% endfor %}#}
{# </div>#} <div class="w" id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script src="/static/js/jquery-3.1.1.js"></script>
<script>
$(function () {
initImg();
scrollEvent(); }); var NID = 0;
var LASEPOSITION = 3; function initImg() {
$.ajax({
url: "/get_img/",
type: "GET",
dataType: "JSON",
data: {"nid": NID},
success: function (arg) {
var img_list = arg.data;
$.each(img_list, function (index, v) {
var eqv = (index + LASEPOSITION + 1) % 4;
tag = document.createElement("img");
tag.src = "/" + v.name;
$("#container").children().eq(eqv).append(tag);
// 当循环到最后一个的时候，将图片id赋值给NID
if (index + 1 == img_list.length) {
NID = v.id;
LASEPOSITION = eqv;
}
})
}
})
} // 当滚轮到达底部时，执行 initImg()
function scrollEvent() {
$(window).scroll(function () {
//什么时候到达底部
//文档高度
var docHeight = $(document).height();
//窗口高度
var winHeight = $(window).height();
//滚动条滑动的高度，
var scrollTop = $(window).scrollTop();
console.log(docHeight, winHeight, scrollTop);
if (winHeight + scrollTop + 1 >= docHeight) {
console.log(1);
initImg()
}
});
}
</script>
</body>
</html>
一共有两种形式，尽量选择第一种吧
def images(request):
return render(request, "images.html") def get_img(request):
nid = request.GET.get("nid")
image_list = models.Images.objects.filter(id__gt=nid).values("name", "id", "title")
image_list = list(image_list)
ret = {
"status": True,
"data": image_list
}
return HttpResponse(json.dumps(ret))
urlpatterns = [
path('admin/', admin.site.urls),
url(r'^images/$', views.images),
url(r'^get_img/$', views.get_img),
url(r'^video-(?P<classification_id>(\d+))-(?P<level_id>(\d+))-(?P<status>(\d+))/$', views.video),
url(r'^video2-(?P<direction_id>(\d+))-(?P<classification_id>(\d+))-(?P<level_id>(\d+))/$', views.video2,
name="video2"),
]
4.瀑布流js的更多相关文章
- 瀑布流js排列
var _px = document.getElementById("px"); var con=document.getElementById("content&quo ...
- [JS练习] 瀑布流照片墙
记录JS实现瀑布流照片墙效果 首先是前端页面 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 分享：纯 css 瀑布流 和 js 瀑布流
分享一次纯 css 瀑布流 和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...
- 8款实用的Jquery瀑布流插件
1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...
- 代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）
代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...
- js瀑布流 原理实现揭秘 javascript 原生实现
web,js瀑布流揭秘 瀑布流再很久之前流行,可能如我一样入行晚的 ,可能就没有机会去使用.但是这个技术终究是个挺炫酷的东西,花了一个上午来研究,用原生js实现了一个,下面会附上源码,供大家解读. 说 ...
- js瀑布流（定位法）
1.首先,自己写好图片路径,引入jquery <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- 用js实现瀑布流的一种简单方法
现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...
- js中masonry与infinitescroll结合 形成瀑布流
后台:(有点问题 page应该从1开始 而不是从0开始) public function actionExperts() { $top=5; $page=em ...
随机推荐
- Python基础语法之文件操作
1 读文件 1.1 简单读文件 f = open('text', 'r') # f是文件句柄 data = f.read() # read方法可以加整型参数,是几就读几个字符 print(data) ...
- 笔记纪要：C# WebService URL重写
背景# 有时候我们会有这样的需求,将 WebService URL 中的 asmx 后缀去掉:或者我们要模拟普通 Web 的 URL,接口名称直接拼接在 URL 中.这些情况我们都要用到URL重写. ...
- 【VS开发】动态添加的ActiveX控件如何响应事件
http://blog.csdn.net/xiaoqiqixiao/article/details/574542 今天在csdn上看到一朋友问如何响应动态添加的控件的事件,搜索资料,发现对于一般的应用 ...
- Solrcloud+tomcat+zookeeper
准备两台服务器,目录结构如下 主机名 IP地址 tomcat安装路径 zookeeper安装路径 solr安装路径 java安装路径 sht-sgmhadoopnn-01 172.16.101.55 ...
- 读取CSV文件存入map中（C++）
自己平时操作文件用的不多,今天小伙伴让帮忙写一下这个,顺便记一下.实现功能:从"翻译.csv"文件中读取出字符串,以","作为分隔符,将每一行对应存入map中. ...
- javascript异步延时加载及判断是否已加载js/css文件
<html> <head> <script type="text/javascript"> /**======================= ...
- mybatis映射文件mapper详解
mapper.xml映射文件主要是用来编写sql语句的,以及一些结果集的映射关系的编写,还有就是缓存的一些配置等等. 1.<select>元素 <select>元素就是sql查 ...
- java复习(1)面向对象
一.面向对象的概念 ----------------------------------------------------- 1.理解面向对象:(1)面向对象是相对于面向过程的语言 (2)面向对象和 ...
- 日语能力考试N2必备训读动词
日语能力考试N2必备训读动词 ア合う——あう——「自」合一.合到一起.准确味わう——あじわう——「他」品味.品尝預かる——あずかる——「他」照顾.保管.承担預ける——あずける——「他」寄存.处理难以了 ...
- js 性能优化 - web worker
当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能. 您可以继续做任何愿意做的事 ...