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实现图片批量剪切示例
Mar 25 Python
Python中的zip函数使用示例
Jan 29 Python
简单介绍Python中的filter和lambda函数的使用
Apr 07 Python
在Python下进行UDP网络编程的教程
Apr 29 Python
Python3.2中Print函数用法实例详解
May 19 Python
python 实现查找文件并输出满足某一条件的数据项方法
Jun 12 Python
python/Matplotlib绘制复变函数图像教程
Nov 21 Python
基于python实现微信好友数据分析(简单)
Feb 16 Python
python数据库编程 ODBC方式实现通讯录
Mar 27 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
Apr 22 Python
基于Python3读写INI配置文件过程解析
Jul 23 Python
Python OpenCV实现图形检测示例详解
Apr 08 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
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
js格式化时间小结
2014/11/03 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
vue.js实例todoList项目
2017/07/07 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
利用python绘制正态分布曲线
2021/01/04 Python
华为C++笔试题
2014/08/05 面试题
安全标准化实施方案
2014/02/20 职场文书
后备干部培训方案
2014/05/22 职场文书
微电影大赛策划方案
2014/06/05 职场文书
优秀团员个人总结
2015/02/26 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技