django中瀑布流写法实例代码

yipeiwu_com5年前Python基础

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

以上就是本次介绍的全部实例内容,大家可以在本次测试下,感谢大家对【听图阁-专注于Python设计】的支持。

相关文章

Python语言的面相对象编程方式初步学习

词语练习 class:告诉python创造一个新的东西 object:两个意思:最基本的东西和任何实例化的东西。 instance:创建一个类得到的东西。 def:在类...

Python完成哈夫曼树编码过程及原理详解

Python完成哈夫曼树编码过程及原理详解

哈夫曼树原理 秉着能不写就不写的理念,关于哈夫曼树的原理及其构建,还是贴一篇博客吧。 /post/97396.htm 其大概流程 哈夫曼编码代码 # 树节点类构建 class Tr...

Django发送html邮件的方法

本文实例讲述了Django发送html邮件的方法。分享给大家供大家参考。具体如下: 在Django中,发送邮件非常的方便,一直没有时间,今天来做一个小小的总结吧。 我们常用的当然是通过s...

Python3安装pip工具的详细步骤

Python3安装pip工具的详细步骤

前几天安装Python的时候没有装上pip工具,所以只能现在手动安装了。 首先,访问https://bootstrap.pypa.io/get-pip.py这个网址,然后Ctrl+S将g...

关于python导入模块import与常见的模块详解

0.什么是python模块?干什么的用的? Java中如果使用abs()函数,则需要需要导入Math包,同样python也是封装的,因为python提供的函数太多,所以根据函数的功能将其...