django中瀑布流写法实例代码


Posted in Python onOctober 14, 2019

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

django中瀑布流写法实例代码

以上就是本次介绍的全部实例内容,大家可以在本次测试下,感谢大家对三水点靠木的支持。

Python 相关文章推荐
Python访问纯真IP数据库脚本分享
Jun 29 Python
Python基于scapy实现修改IP发送请求的方法示例
Jul 08 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
Feb 05 Python
cmd运行python文件时对结果进行保存的方法
May 16 Python
python smtplib发送带附件邮件小程序
May 22 Python
Python中pandas dataframe删除一行或一列:drop函数详解
Jul 03 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
Apr 04 Python
Python实现的删除重复文件或图片功能示例【去重】
Apr 23 Python
Python3标准库之functools管理函数的工具详解
Feb 27 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
May 22 Python
Python 如何对文件目录操作
Jul 10 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
Nov 28 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
Oct 14 #Python
python实现文件批量编码转换及注意事项
Oct 14 #Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
Oct 14 #Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
Oct 14 #Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
Oct 14 #Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
Oct 14 #Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
Oct 14 #Python
You might like
人族 Terran 魔法与科技
2020/03/14 星际争霸
php获取post中的json数据的实现方法
2011/06/08 PHP
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
简单实现php上传文件功能
2017/09/21 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
javascript闭包入门示例
2014/04/30 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
再谈javascript原型继承
2014/11/10 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python中的闭包用法实例详解
2015/05/05 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
中专生自我鉴定
2013/12/17 职场文书
四议两公开实施方案
2014/03/28 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
MySQL日期时间函数知识汇总
2022/03/17 MySQL
Java界面编程实现界面跳转
2022/06/16 Java/Android