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 ...
随机推荐
- php连接mysql，数据CRUD操作
插入数据 <?php $name = $_GET['username']; $sex = $_GET['sex']; $hobby = $_GET['hobby']; $address = $_ ...
- mnist数据集下载——mnist数据集提供百度网盘下载地址
mnist数据集是由深度学习大神 LeCun等人制作完成的数据集,mnist数据集也常认为是深度学习的“ Hello World!”. 官网:http://yann.lecun.com/exdb/mn ...
- laravel修改用户模块的密码验证
做项目的时候,用户认证几乎是必不可少的,如果我们的项目由于一些原因不得不使用 users 之外的用户表进行认证,那么就需要多做一点工作来完成这个功能. 现在假设我们只需要修改登录用户的表,表名和表结构 ...
- 使用Koa.js离不开这十个中间件
随着ES6的普及,async/await的语法受到更多JS开发者的青睐,Koa.js作为比较早支持使用该语法的Node框架越来越受到大家的喜爱,虽然Koa.js本身支持的功能很有限,但官方和社区提供了 ...
- vue单页(spa)前端git工程拆分实践
背景 随着项目的成长,单页spa逐渐包含了许多业务线 商城系统 售后系统 会员系统 ... 当项目页面超过一定数量(150+)之后,会产生一系列的问题 可扩展性 项目编译的时间(启动server,修改 ...
- 严重报错: Error configuring application listener of class org.springframework.web.context.ContextLoaderLis
其实可能是你的jar文件没有同步发布到自己项目的lib目录中(如果你是用Maven进行构建的话) 可以试试 下面的办法 项目点击右键 点击 Properties 选择Deployment Assemb ...
- char转int，int转char
char转int 1) '; if (Character.isDigit(ch)){ // 判断是否是数字 int num = Integer.parseInt(String.valueOf(ch)) ...
- Vue.nextTick 的原理和用途
转载自https://segmentfault.com/a/1190000012861862 概览 官方文档说明: 用法: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法 ...
- poj 1543 Perfect Cubes (暴搜)
Perfect Cubes Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 15302 Accepted: 7936 De ...
- 5月Linux市场Steam 份额在增长
随着新的一个月的开始,Valve公布了上个月的软件/硬件调查数据.在2019年5月,Steam Linux的使用率按百分比略微上升. 上个月,运行Linux的Steam用户比例(根据有争议的Steam ...