微信公众号搭建微网站,长沙水业网站是哪家公司做的,甘肃省建设厅官网,wordpress手机登录跳转页面django实现图片瀑布流布局 我们在一些图片网站上经常会看到#xff0c;满屏都是图片#xff0c;而且图片都大小不一#xff0c;却可以按空间排列。默认一个div是占用一行#xff0c;当想把div里的图片并排显示的时候#xff0c;只能使用float属性#xff0c;但是#xf… django实现图片瀑布流布局 我们在一些图片网站上经常会看到满屏都是图片而且图片都大小不一却可以按空间排列。默认一个div是占用一行当想把div里的图片并排显示的时候只能使用float属性但是如果两张图片大小不一那么第二行图片会以第一张最大的图片占用的空间为基准进行第二行显示这样的图片布局就非常难看今天实现的就是瀑布流的形式 实现效果 一般我们做图片布局的时候都是采用div中加入img然后将div float起来这样图片就会并排显示。实现瀑布流的原理就是我们换一种布局方式首先定义好需要显示多少列图片多少列就是多少和div然后在每列的div中去加入div包着的图片由于图片外的div是行标签所以默认独占一行所以在本列的div中图片就无缝的向下排列了同理其他列也是这样总体布局就出现了看下图 具体html代码 不在说明下面说一下 如何结合模版语言去动态展示瀑布里图片 view代码 def student(request):img_list [{src: 1.jpg, title: asdfasdfasdf,content: asdf},# 1{src: 2.jpg, title: asdfasdfasdf,content: asdf},# 2{src: 3.jpg, title: asdfasdfasdf,content: asdf},{src: 4.jpg, title: asdfasdfasdf,content: asdf},{src: 5.jpg, title: asdfasdfasdf,content: asdf},# 5{src: 6.jpg, title: asdfasdfasdf,content: asdf},]return render(request, student.html, {img_list:img_list})   首先分析现在以四列布局 div分别是a、b、c、d 那么图片1就在div a中图片2就在div b中图片3就在div c中图片4就在div d中到图片5时就继续从div a中开始后面依次。发现其中的规律就是第多少张图片 n 除以 4的余数m 就是第m个div。根据这个规律我们可以使用模版语言中自定义的方法去进行判断如果本图片 除以4正好等于所比较的div 号那么就放进去 代码 from django import template register template.Library()register.filter def detail1(value,arg):查看余数是否等于remainder arg1,2:param counter::param allcount::param remainder::return:allcount, remainder arg.split(,)allcount int(allcount)remainder int(remainder)if value%allcount remainder:return Truereturn False   html 代码 {% load xx %} !DOCTYPE html html langen headmeta charsetUTF-8title/titlestyle.container{width: 980px;margin: 0 auto;}.container .column{float: left;width: 245px;}.container .item img{width: 245px;}/style /head bodydiv classcontainerdiv classcolumn{% for i in img_list %}{% if forloop.counter|detail1:4,1 %}div classitem{{ forloop.counter }}img src/static/{{ i.src }}/div{% endif %}{% endfor %}/divdiv classcolumn{% for i in img_list %}{% if forloop.counter|detail1:4,2 %}div classitem{{ forloop.counter }}img src/static/{{ i.src }}/div{% endif %}{% endfor %}/divdiv classcolumn{% for i in img_list %}{% if forloop.counter|detail1:4,3 %}div classitem{{ forloop.counter }}img src/static/{{ i.src }}/div{% endif %}{% endfor %}/divdiv classcolumn{% for i in img_list %}{% if forloop.counter|detail1:4,0 %}div classitem{{ forloop.counter }}img src/static/{{ i.src }}/div{% endif %}{% endfor %}/div/div/body /html   上面只是简单的利用模版语言 实现了瀑布流布局但是会发现图片列表需要循环四次这样效率不好一般情况下可以使用ajax先获取到图片列表然后js去循环列表然后在循环中将当前循环的元素索引 去和4相除拿到余数最后使用jquery 根据余数进行直接定位到对应的div django实现组合搜索 案例 表设计 根据上面的案例第一行为总的方向第二行为方向下的分类第三行为分类下的级别 1.总的方向和分类的关系为一个分类可能属于多个方向一个方向下有多个分类所以属于多对多的关系2. 分类下应该有多个数据数据应该只属于一个分类所以数据和分类的关系为一对多的关系3. 级别应该是数据的一个字段根据以上分析下面是表结构 from django.db import models# Create your models here. # 技术方向 class Direction(models.Model):name models.CharField(verbose_name名称, max_length32)classification models.ManyToManyField(Classification)class Meta:db_table Directionverbose_name_plural u方向视频方向def __str__(self):return self.name# 技术分类、语言 class Classification(models.Model):name models.CharField(verbose_name名称, max_length32)class Meta:db_table Classificationverbose_name_plural u分类视频分类def __str__(self):return self.name# 技术视频 class Video(models.Model):level_choice ((1, u初级),(2, u中级),(3, u高级),)level models.IntegerField(verbose_name级别, choiceslevel_choice, default1)classification models.ForeignKey(Classification, nullTrue, blankTrue)title models.CharField(verbose_name标题, max_length32)summary models.CharField(verbose_name简介, max_length32)img models.ImageField(verbose_name图片, upload_to./static/images/Video/)href models.CharField(verbose_name视频地址, max_length256)create_date models.DateTimeField(auto_now_addTrue)class Meta:db_table Videoverbose_name_plural u视频def __str__(self):return self.title   html 设计 案例中的方向、分类、和级别都是直接从数据库中拿到的数据所以这里就应用到了模版语言下面是html代码里面使用了自定义的tag方法 {% load xx %} !DOCTYPE html html langen headmeta charsetUTF-8title/titlestyle.condition a{display: inline-block;padding: 5px;}.condition a.active{background-color: coral;color: white;}/style /head bodydiv classconditiondiv{% all_menu current_url %} :{% for i in dList %}{% ac1 current_url i.id i.name %}{% endfor %}/divdiv{% for i in cList %}{% ac2 current_url i.id i.name %}{% endfor %}/divdiv{% for i in lList %}{% ac3 current_url i.0 i.1 %}{% endfor %}/div/div/body /html   view 设计 from django.shortcuts import render from app01 import models # Create your views here.def video(request,**kwargs):print(kwargs)print(request.path_info)current_url request.path_info #获取当前urldirection_id kwargs.get(direction_id,0)classfication_id kwargs.get(classfication_id, 0)q {}# 方向是0if direction_id 0:cList models.Classification.objects.values(id, name)# 分类是0if classfication_id 0:# video-0-0passelse:# video-0-1# 选中了某个分类q[classification__id] classfication_idelse:obj models.Direction.objects.get(iddirection_id)temp obj.classification.all().values(id,name)id_list list(map(lambda x:x[id],temp))cList obj.classification.all().values(id,name)if classfication_id 0:# video-1-0# 根据风向ID找到所属的分类IDprint(id_list)q[classification__id__in] id_listelse:# video-1-1if int(classfication_id) in id_list:q[classification__id] classfication_idelse:q[classification__id__in] id_listurl_list current_url.split(-)url_list[2] 0current_url -.join(url_list)level_id kwargs.get(level_id,None)if level_id ! 0:q[level] level_idresult models.Video.objects.filter(**q)dList models.Direction.objects.values(id, name)lList models.Video.level_choice# level_choice (# (1, u初级),# (2, u中级),# (3, u高级),# )return render(request, video.html, {dList:dList,cList: cList,lList: lList,current_url: current_url})   模版语言自定义方法 from django import template from django.utils.safestring import mark_saferegister template.Library() register.simple_tag def action1(current_url, nid):# /video-2-1-3.htmlurl_list current_url.split(-)url_list[1] str(nid)return -.join(url_list)register.simple_tag def action2(current_url, nid):# /video-2-1-3.htmlurl_list current_url.split(-)url_list[2] str(nid)return -.join(url_list)register.simple_tag def action3(current_url, nid):# /video-2-1-3.htmlurl_list current_url.split(-)url_list[3] str(nid) .htmlreturn -.join(url_list)register.simple_tag def ac1(current_url, nid, name):# # /video-2-1-3.htmlurl_list current_url.split(-)old url_list[1]if old str(nid):temp a classactive href%s%s/aelse:temp a href%s%s/aurl_list[1] str(nid)tag temp %(-.join(url_list),name)return mark_safe(tag)register.simple_tag def ac2(current_url, nid, name):# # /video-2-1-3.htmlurl_list current_url.split(-)old url_list[2]if old str(nid):temp a classactive href%s%s/aelse:temp a href%s%s/aurl_list[2] str(nid)tag temp %(-.join(url_list),name)return mark_safe(tag)register.simple_tag def ac3(current_url, nid, name):# # /video-2-1-3.htmlurl_list current_url.split(-)old url_list[3]if old str(nid) .html:temp a classactive href%s%s/aelse:temp a href%s%s/aurl_list[3] str(nid) .htmltag temp %(-.join(url_list),name)return mark_safe(tag)register.simple_tag def all_menu(current_url):# video-0-10-0.htmlurl_list current_url.split(-)if url_list[1] 0:temp a classactive href%s全部/aelse:temp a href%s全部/aurl_list[1] 0temp temp %(-.join(url_list))return mark_safe(temp)   url 设计 urlpatterns [url(r^admin/, admin.site.urls),url(r^video-(?Pdirection_id\d)-(?Pclassfication_id\d)-(?Plevel_id\d).html, views.video),]   django实现阶梯评论 data [(None,A),(A,A1),(A,A1-1),(A1,A2),(A1-1,A2-3),(A2-3,A3-4),(A1,A2-2),(A2,A3),(A2-2,A3-3),(A3,A4),(None,B),(B,B1),(B1,B2),(B1,B2-2),(B2,B3),(None,C),(C,C1),]def tree_search(d_dic,parent,son):#一层一层找,先拨第一层,一层一层往下找for k,v in d_dic.items():#举例来说我先遇到A,我就把A来个深度查询,A没有了在找Bif k parent:#如果等于就找到了parent,就吧son加入到他下面d_dic[k][son] {} #son下面可能还有儿子#这里找到就直接return了,你找到就直接退出就行了returnelse:#如果没有找到,有可能还有更深的地方,的需要剥掉一层tree_search(d_dic[k],parent,son)data_dic {}for item in data:# 每一个item代表两个值一个父亲一个儿子parent,son item#先判断parent是否为空,如果为空他就是顶级的,直接吧他加到data_dicif parent is None:data_dic[son] {} #这里如果为空,那么key就是他自己,他儿子就是一个空字典else:如果不为空他是谁的儿子呢?举例来说A3他是A2的儿子,但是你能直接判断A3的父亲是A2你能直接判断他是否在A里面吗?你只能到第一层.key所以咱们就得一层一层的找,我们知道A3他爹肯定在字典里了,所以就得一层一层的找,但是不能循环找,因为你不知道他有多少层,所以通过递归去找直到找到位置tree_search(data_dic,parent,son) #因为你要一层一层找,你的把data_dic传进去,还的把parent和son传进去for k,v in data_dic.items():print(k,v)   执行结果 (A, {A1: {A2: {A3: {A4: {}}}, A2-2: {A3-3: {}}}, A1-1: {A2-3: {A3-4: {}}}}) (C, {C1: {}}) (B, {B1: {B2-2: {}, B2: {B3: {}}}})另一种方法 def SearchParentNode(comment,CommentTree):功能查找本条评论的父评论for i in CommentTree:if comment[reply_id] i[cid]: #如果reply_id和本节点cid一样则找到父节点CommentTree[CommentTree.index(i)][childs].append(comment)else:SearchParentNode(comment, CommentTree[CommentTree.index(i)][childs])comment_lists models.Comment.objects.filter(news_idnews_id).values(cid,user__username,content,ctime,ups,downs,news_id,reply_id,)comment_lists list(comment_lists)comment_tree [] #为每个comment添加一个child字段for comment in comment_lists:comment[childs] []if not comment[reply_id]: #如果reply_id为空,表示为根评论comment_tree.append(comment)else:SearchParentNode(comment,comment_tree) #否则递归查找父节点result {TotalCount:len(comment_lists),CommentTree:comment_tree}print(result)return HttpResponse(json.dumps(result,clscommons.JsonCustomEncoder))   django实现验证码 验证码需要考虑的问题 1系统产生的验证码文本内容记录在哪 储存到session每次比对的验证码应该是上次产生的验证。而不是这次产生的验证比对。session具有独立性。因为每个人产生的session的随机字符串是不一样也就意味着每个用户有单独的session。所以将验证码储存在session。保证每次比对的是同一个用户的验证码。 2验证码产生的形式文本还是图片 验证码的作用就是为了避免不法用户ddos攻击网站通过网站的验证码可以降低攻击速率。如果是文本的话我们可以 用脚本可以抓取相应的标签内的验证码。所以验证码不能为文本。由于识别图片的成本较高而且速度也不快。所以采用图片的形式储存验证码。 3点击验证码图片要保证更新图片内容怎么实现 保证每次请求的url是不一样比如通过加?问号来保证每次请求的url是不一样让系统产生的不同验证码。 需要安装Pillow模块 pip3.5.exe install Pillow 产生图片和验证码代码 #!/usr/bin/env python #coding:utf-8import random from PIL import Image, ImageDraw, ImageFont, ImageFilter_letter_cases abcdefghjkmnpqrstuvwxy # 小写字母去除可能干扰的iloz _upper_cases _letter_cases.upper() # 大写字母 _numbers .join(map(str, range(3, 10))) # 数字 init_chars .join((_letter_cases, _upper_cases, _numbers))def create_validate_code(size(120, 30),charsinit_chars,img_typeGIF,modeRGB,bg_color(255, 255, 255),fg_color(0, 0, 255),font_size18,font_typeMonaco.ttf,length4,draw_linesTrue,n_line(1, 2),draw_pointsTrue,point_chance 2):todo: 生成验证码图片param size: 图片的大小格式宽高默认为(120, 30)param chars: 允许的字符集合格式字符串param img_type: 图片保存的格式默认为GIF可选的为GIFJPEGTIFFPNGparam mode: 图片模式默认为RGBparam bg_color: 背景颜色默认为白色param fg_color: 前景色验证码字符颜色默认为蓝色#0000FFparam font_size: 验证码字体大小param font_type: 验证码字体默认为 ae_AlArabiya.ttfparam length: 验证码字符个数param draw_lines: 是否划干扰线param n_lines: 干扰线的条数范围格式元组默认为(1, 2)只有draw_lines为True时有效param draw_points: 是否画干扰点param point_chance: 干扰点出现的概率大小范围[0, 100]return: [0]: PIL Image实例return: [1]: 验证码图片中的字符串width, height size # 宽 高img Image.new(mode, size, bg_color) # 创建图形draw ImageDraw.Draw(img) # 创建画笔def get_chars():生成给定长度的字符串返回列表格式return random.sample(chars, length)def create_lines():绘制干扰线line_num random.randint(*n_line) # 干扰线条数for i in range(line_num):# 起始点begin (random.randint(0, size[0]), random.randint(0, size[1]))#结束点end (random.randint(0, size[0]), random.randint(0, size[1]))draw.line([begin, end], fill(0, 0, 0))def create_points():绘制干扰点chance min(100, max(0, int(point_chance))) # 大小限制在[0, 100]for w in range(width):for h in range(height):tmp random.randint(0, 100)if tmp 100 - chance:draw.point((w, h), fill(0, 0, 0))def create_strs():绘制验证码字符c_chars get_chars()strs %s % .join(c_chars) # 每个字符前后以空格隔开 font ImageFont.truetype(font_type, font_size)font_width, font_height font.getsize(strs)draw.text(((width - font_width) / 3, (height - font_height) / 3),strs, fontfont, fillfg_color)return .join(c_chars)if draw_lines:create_lines()if draw_points:create_points()strs create_strs()# 图形扭曲参数params [1 - float(random.randint(1, 2)) / 100,0,0,0,1 - float(random.randint(1, 10)) / 100,float(random.randint(1, 2)) / 500,0.001,float(random.randint(1, 2)) / 500]img img.transform(size, Image.PERSPECTIVE, params) # 创建扭曲 img img.filter(ImageFilter.EDGE_ENHANCE_MORE) # 滤镜边界加强阈值更大return img, strs   如上模块返回的是图片对象和验证码。 后台验证码coder def check_code(request):import iofrom backend import check_code as CheckCodestream io.BytesIO()#在内存中产生# img图片对象,code在图像中写的内容img, code CheckCode.create_validate_code()img.save(stream, png)#将验证码图片保存在内存里的文件中 request.session[CheckCode] codereturn HttpResponse(stream.getvalue())#从内存中取出图片返回给前端。# 代码生成一张图片在图片中写文件# request.session[CheckCode] 图片上的内容# 自动生成图片并且将图片中的文字保存在session中# 将图片内容返回给用户def login(request):if request.method POST:input_code request.POST.get(check_code)#验证码的比对print(input_code.upper(),request.session[CheckCode].upper())return render(request, login.html)   前端  !DOCTYPE html html langen headmeta charsetUTF-8title/title /head bodyform action/login/ methodPOSTinput typetext nameusername /input typetext namepwd /input typetext namecheck_code /img src/check_code/ onclickChangeCode(this);input typesubmit //formscriptfunction ChangeCode(ths){ths.src ths.src ?;//保证用户在点击验证码图片的时候进行更新。保证每次请求的url是不同的。}/script /body /html   转载于:https://www.cnblogs.com/pycode/p/django3.html