Django实现瀑布流布局的完整实例

Django瀑布流实现概述

在Django项目中实现瀑布流布局，通常涉及前端的页面结构搭建与后端的接口配合。本节将简要介绍实现该功能的基本思路，即通过前端异步请求获取图片数据，并利用JavaScript动态插入DOM元素，从而形成视觉上的瀑布流效果。

前端页面结构与初始化

前端页面结构主要包含一个用于容纳图片容器的div，以及引入jQuery库以简化DOM操作。页面初始化时，会调用特定的JavaScript函数来发起首次数据请求。

<!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>

后端视图处理逻辑

后端视图层负责处理前端的请求。其中，普通视图用于渲染初始页面，而专门的数据接口视图则接收前端传递的参数，从数据库中筛选出符合条件的图片记录，并将其序列化为JSON格式返回给前端。关键逻辑在于根据传入的ID过滤出ID大于该值的记录，确保数据不重复且能继续加载。

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)

数据模型定义

在Django模型定义中，需要创建对应的图片模型类。该类包含图片路径字段、标题字段以及简介字段。通过设置Meta元数据指定后台管理的显示名称，并定义__str__方法以便在管理界面直观查看图片标题。

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中实现瀑布流布局的完整实例代码与说明。开发者可以基于此示例进行本地测试与功能验证，感谢对本站技术分享的支持。