django中瀑布流写法实例代码

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

以上就是本次介绍的全部实例内容，大家可以在本次测试下，感谢大家对我们的支持。

赞 (0)

相关推荐

  • django中瀑布流写法实例代码

    django中瀑布流写法实例代码

    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 im

  • javascript中函数的写法实例代码详解

    具体代码如下所述: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible

  • Django中间件工作流程及写法实例代码

    Django中间件工作流程及写法实例代码

    熟悉web开发的同学对hook钩子肯定不陌生,通过钩子可以方便的实现一些触发和回调,并且做一些过滤和拦截. django中的中间件(middleware)就是类似钩子的一种存在.下面我们来介绍一下,并且给出一些实例. 1.Middleware的工作流程 我盗了一个图,看网上很多人用这个图,来源已经追不明白了.简单声明一下,这个图不是我的.看着图我们分析一下: 1)django的请求相应流程:HttpRequest -> RequestMiddleware -> view function -&

  • Java中io流解析及代码实例

    Java中io流解析及代码实例

    IO流 Java中IO流分为两种,字节流和字符流,顾名思义字节流就是按照字节来读取和写入的,字符刘是按照字符来存取的:常用的文件读取用的就是字符流,在网络通信里面用的就是字节流 下面这张图是Java中IO流的总体框架: 字节流 Java中字节流一般都是以stream结尾的,输入的字节流叫InputStream,输出字节流叫OutputStream;InputStream和OutputStream是表示自己输入/输出的所有类的超类,是抽象类(abstract) 常用的字节流有: 1.FileInp

  • js 中rewrap-ajax.js插件实例代码

    最近写了一个JS插件,用圈内的话说叫造了个轮子,造的好与不好都不是自己说了算,关键还是大家用的好与不好. 当然我自己也在使用,由于个人偏爱与喜好,所以未能借签其他Ajax框架的写法,目前的版本都是以版本一进行往上整合的成果,所以你想要全面了解内部的结构,可以先从版本一开始看起. 现在我们说说整体的设计结构,版本一是好友收集整理的方法,基础的写法已经成型,调用nativeAjax方放即可,方法内部有三个参数,第一个为ajax的属性,第二个为成功的函数,第三个为错误的函数,具体如下: nativeA

  • BaseJDBC和CRUDDAO的写法实例代码

    我们首先看下BASEJDBC的写法实例: package com.dao; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import com.mysql.jdbc.Driver; public class BaseJDBC { // 表示你要操作的是哪种类型

  • C++ 中strcpy标准写法实例详解

    strcpy标准写法 实例代码: // CppReference.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" using namespace std; /* * 说明:字符串拷贝版本1 * 参数:dest目标地址,src源地址 * 返回:返回拷贝好的地址:如果出错或者有重叠,无定义 * 异常:可能出现字符串溢出,及dest所占空间不如src所占空间大. */ char *strcpy_v1(char *dest , const char *s

  • pycharm+django创建一个搜索网页实例代码

    pycharm+django创建一个搜索网页实例代码

    本文主要研究的是pycharm+django创建一个搜索网页的实例代码,具体步骤和代码示例如下. 创建工程 比如,我创建的工程目录结构如下: 命令行 进入windows命令行,进入根目录: python manage.py startapp django_web 接着你会在pycharm中发现,多了一个django_web文件夹.如下将截图: 创建一个test.html <!DOCTYPE html> <html> <head> <title>开始搜索<

  • django 按时间范围查询数据库实例代码

    从前台中获得时间范围,在django后台处理request中数据,完成format,按照范围调用函数查询数据库. 介绍一个简单的功能,就是从web表单里获取用户指定的时间范围,然后在数据库中查询此时间范围内的数据. 数据库里的model举例是这样: class book(models.Model): name = models.CharField(max_length=50, unique=True) date = models.DateTimeField() def __unicode__(s

  • django中嵌套的try-except实例

    我就废话不多说了,大家还是直接看代码吧! # 因为此时为yaml模板,而且只抓取node port,所以这样处理效率快 content_dict = parse_yaml(content.replace("{{", "").replace("}}", "")) if 'service' in content_dict.keys(): # 记录本次yaml里所有的node_port,并更新到数据库 now_app_list =

随机推荐