1. 瀑布流布局原理
在前端页面布局中,图片放置时存在图片宽度、长度大小不一的情况,在不调整图片大小成一致的情况下,选择瀑布流布局是很好的解决图片能紧致放置的一种办法。瀑布流如何解决这个问题呢?
- 设置页面div宽度为固定宽度;
- 将页面根据图片排列多少列分成相应的div个数,同时设置div的宽度为固定宽度,可以一样,也可以设置为不同。
- 从后台数据库中拿到图片链接,然后图片的索引下标求余图片列数(index%col)然后将图片对应放入相应的div中。
- 然后监听鼠标滚轮移动到屏幕最下端通过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