django中瀑布流写法实例代码
作者：帅的遭人砍see 时间：2022-08-04 11:11:26
django中瀑布流初探
img.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">11
</div>
<div class="item">22
</div>
<div class="item">33
</div>
<div class="item">44
</div>
</div>
<script src="/static/jquery-1.12.4.js"></script>
<script>
$(function () {
initImg();
});
NID = 0;
function initImg() {
$.ajax({
url: '/get_imgs.html',
type: 'GET',
data:{nid:NID},
dataType: 'JSON',
success:function (arg) {
var img_list = arg.data;
$.each(img_list,function (index,v) {
{# index,v，index是指的索引，v是指的内容 #}
var eqv = index ％ 4;
var tag = document.createElement('img');
tag.src = '/'+ v.src;
$('#container').children().eq(eqv).append(tag);
//这里的eq是获取children里面的内容
})
}
})
}
</script>
</body>
</html>
views
def imgs(request):
# img_list = models.Img.objects.all()
return render(request,'img.html')
def get_imgs(request):
nid = request.GET.get('nid')
img_list = models.Img.objects.filter(id__gt=nid).values('id','src','title')
img_list = list(img_list)
ret = {
'status': True,
'data': img_list
}
# return HttpResponse(json.dumps(ret))
return JsonResponse(ret)
# return JsonResponse([11,22,33],safe=False)
models
class Img(models.Model):
src = models.FileField(max_length=32,verbose_name='图片路径',upload_to='static/upload')
title = models.CharField(max_length=16,verbose_name='标题')
summary = models.CharField(max_length=128,verbose_name='简介')
class Meta:
verbose_name_plural = '图片'
def __str__(self):
return self.title
来源：https://www.cnblogs.com/wenghao/p/11670633.html
标签：django,瀑布流
0
投稿猜你喜欢
详解element-ui 表单校验 Rules 配置 常用黑科技
2023-08-17 17:42:47
Vue2.0实现购物车功能
2023-07-02 16:54:22
浅谈keras中loss与val_loss的关系
2021-12-12 08:41:22
Python异步处理返回进度——使用Flask实现进度条
2023-10-19 23:23:08
pytest官方文档解读之安装和使用插件的方法
2022-11-25 23:05:38
python遍历迭代器自动链式处理数据的实例代码
2022-04-12 18:38:29
SQL Server中单引号的两种处理技巧
2008-05-23 13:30:00
安装多个版本的TensorFlow的方法步骤
2022-12-10 00:13:02
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2021-02-18 02:09:22
实现Windows下设置定时任务来运行python脚本
2021-10-12 05:03:32
Python字符编码转码之GBK,UTF8互转
2023-02-20 14:03:01
制作全局临时表
2010-06-11 13:36:00
如何利用python的tkinter实现一个简单的计算器
2021-09-12 09:19:52
Django之Mode的外键自关联和引用未定义的Model方法
2023-09-04 13:34:40
wap开发 完整的WML文档结构详解
2008-05-21 13:39:00
Data URI小试 —— 在旺旺点灯(JS)上的应用
2009-10-30 18:28:00
深入分析MSSQL数据库中事务隔离级别和锁机制
2024-01-22 02:53:35
Python基础知识之变量的详解
2023-12-16 13:41:40
PHP iconv 解决utf-8和gb2312编码转换问题
2024-04-29 13:56:58
python requests 库请求带有文件参数的接口实例
2022-04-23 09:12:10
