瀑布流(基于Django)
2024-10-21 06:44:09
# 后端
from django.shortcuts import render, HttpResponse
from django.http import JsonResponse
from app01 import models
import json
from django.db.models import Q def imgs(request):
return render(request, 'img.html') def get_imgs(request):
nid = request.GET.get('nid')
img_list = models.Img.objects.filter(Q(id__gt=nid)&Q(id__lt=(nid+7))).values('id', 'src', 'title') # 一次从数据库取7张图片
img_list = list(img_list)
ret = {
'status': True,
'data': img_list
}
return JsonResponse(ret)
# 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" id="container">
<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();
obj.fetchImg();
obj.scrollEvent(); });
function ScrollImg() {
this.NID = 0;
this.LASTPOSITION = 3;
this.fetchImg = function () {
var that = this;
$.ajax({
url: '/get_imgs.html',
type: 'GET',
data: {nid: that.NID},
dataType: 'JSON',
success: function (arg) {
var img_list = arg.data;
$.each(img_list, function (index, v) {
var eqv = (index + that.LASTPOSITION + 1) % 4;
//console.log(eqv);
var tag = document.createElement('img');
tag.src = '/' + v.src;
$('#container').children().eq(eqv).append(tag);
if (index + 1 == img_list.length) {
that.LASTPOSITION = eqv;
that.NID = v.id;
}
}) } })
};
this.scrollEvent = function () {
var that = this;
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
var winHeight = $(window).height();
var docHeight = $(document).height();
if (scrollTop + winHeight == docHeight) {
that.fetchImg();
}
})
} } </script>
</body>
</html>
最新文章
- js 控制框架页面跳转 top.location.herf = ";url";
- 移动端touch模块
- 通过Spring @PostConstruct 和 @PreDestroy 方法 实现初始化和销毁bean之前进行的操作
- 夺命雷公狗—angularjs—2—模拟表单验证
- Java [leetcode 1] Two Sum
- use isSubstring to check if one word is a rotation of another.
- goodAddr
- AutoIt 函数学习之----Send函数
- spring schema自定义
- mysqldump 利用rr隔离实现一致性备份
- java 常用的包 默认导入的包
- JavaScript 属性操作
- SSO单点登录的研究
- 团队作业8——第二次项目冲刺(Beta阶段)Day6——5.25
- Python3基础 dict get 在查询不存在的键时,返回指定的内容
- Ubuntu防火墙配置
- unittest之suite测试集(测试套件)
- Android-系统解析AndroidManifest
- ZUI分页器的使用案例(ECLIPSE SMS项目)
- [转]Android Activity和Fragment的转场动画