Django --图片瀑布流布局+动态的渲染

1. 瀑布流布局原理

在前端页面布局中，图片放置时存在图片宽度、长度大小不一的情况，在不调整图片大小成一致的情况下，选择瀑布流布局是很好的解决图片能紧致放置的一种办法。瀑布流如何解决这个问题呢？

1. 设置页面div宽度为固定宽度；
2. 将页面根据图片排列多少列分成相应的div个数，同时设置div的宽度为固定宽度，可以一样，也可以设置为不同。
3. 从后台数据库中拿到图片链接，然后图片的索引下标求余图片列数（index%col）然后将图片对应放入相应的div中。
4. 然后监听鼠标滚轮移动到屏幕最下端通过ajax自动加载图片,从而实现图片自动加载和瀑布流布局。

2. 具体实现过程

2.1 图片数据库创建

创建一个表用来存放图片的链接，标题，简介。（后续通过scrapy爬取图片信息自动存入数据库中）

# 创建图片表
class Img(models.Model):
    src = models.CharField(max_length=256, verbose_name="图片链接") 	# 图片链接
    title = models.CharField(max_length=32, verbose_name="图片标题")	# 图片标题
    intro = models.CharField(max_length=32, verbose_name="简介")		# 图片简介
    add_time = models.DateTimeField(verbose_name="添加时间", auto_now_add=True)

    #def __str__(self):
        #return self.title   

2.2 视图函数

通过模板中传入的ajax数据请求进行处理然后传入到模板中进行渲染。

# 导入模块
from django.shortcuts import render, redirect
from django.http import HttpResponse
from pbl.models import Img
import json

# 图片显示
def index(request):
    img_obj_list = Img.objects.all()
    return render(request, "pbl/index.html", context={
   "img_obj_list": img_obj_list})

#添加图片信息
def add_img(request):
    if request.method == "GET":
        return render(request