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中的jquery PyQuery库使用小结
May 13 Python
python进程类subprocess的一些操作方法例子
Nov 22 Python
Python加pyGame实现的简单拼图游戏实例
May 15 Python
Python如何为图片添加水印
Nov 25 Python
Python实现对象转换为xml的方法示例
Jun 08 Python
Python针对给定列表中元素进行翻转操作的方法分析
Apr 27 Python
Python实现二叉树的常见遍历操作总结【7种方法】
Mar 06 Python
python使用MQTT给硬件传输图片的实现方法
May 05 Python
Python高级特性 切片 迭代解析
Aug 23 Python
通过实例解析Python return运行原理
Mar 04 Python
Python使用pyexecjs代码案例解析
Jul 13 Python
Python还能这么玩之用Python修改了班花的开机密码
Jun 04 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
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
Python中if有多个条件处理方法
2020/02/26 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
工艺工程师工作职责
2013/11/23 职场文书
现场施工员岗位职责
2014/03/10 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
清明节寄语2015
2015/03/23 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL