瀑布流瀑布流，又稱瀑布流式布局。是比較流行的一種網(wǎng)站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。最早采用此布局的網(wǎng)站是Pinterest，逐漸在國內(nèi)流行開來。國內(nèi)大多數(shù)清新站基本為這類風(fēng)格。 實(shí)現(xiàn)效果:
數(shù)據(jù)存放方式:
實(shí)現(xiàn)方式一: 自定義模版語言(simple_tag) 思路: 后端獲取數(shù)據(jù),,前端頁面使用自定義模板語言,實(shí)現(xiàn)第一條數(shù)據(jù)放第一個div,...,(通過求余數(shù)實(shí)現(xiàn)),返回標(biāo)簽字符串,頁面顯示. 實(shí)現(xiàn)方法: 1.在app中創(chuàng)建templatetags模塊 2.創(chuàng)建任意 .py 文件，如：newtag.py 
from django import template from django.utils.safestring import mark_safe register = template.Library() 3.后臺獲取數(shù)據(jù) 
View Code4.前端使用模板語言 for循環(huán)得到每一個item數(shù)據(jù)
View Code5.自定義模版語言, 實(shí)現(xiàn):傳入item數(shù)據(jù) , 當(dāng)前循環(huán)的次數(shù) , => 通過次數(shù) , 求余判斷, 數(shù)據(jù)放在div1 還是div2 ,.... ,  @register.simple_tag def image_show(item,counter,allcount,remainder): ''' :param item: 當(dāng)前循環(huán)獲取的數(shù)據(jù) :param counter: 當(dāng)前循環(huán)次數(shù)(模版語言for循環(huán)默認(rèn)從1開始) :param allcount: 頁面分布列數(shù) :param remainder: 余數(shù) :return: ''' TEMP = ''' <div style="width: 245px;" > <img src="/%s" alt="" style="width: 245px;height: 250px"> <p>%s</p> <p>%s</p> </div> ''' if counter%allcount == remainder: TEMP = TEMP %(item['student__pic'], item['student__name'], item['letter_of_thanks'], ) return mark_safe(TEMP) else: return '' 注意:模版語言默認(rèn)會返回None , 所以要設(shè)置返回空字符串 6.前端調(diào)用: <div style="width: 245px;float: left"> {% for item in queryset_dict %} {% image_show item forloop.counter 4 1 %} {% endfor %} </div> forloop.counter 獲取當(dāng)前循環(huán)的次數(shù) (默認(rèn)從1開始遞增!) 7.div2,div3,div4 同上 完整代碼:
自定義模版語言
前端頁面實(shí)現(xiàn)方式二: 自定義模版語言(filter) 區(qū)別: 1.自定義的模版語言使用filter 而不是simple_tag 2.自定義的filter 支持if 條件判斷來使用! , 而 simple_tag不支持 {% if filter模版語言返回結(jié)果 %}
...
{% endif %}
或 {{ filter模版語言 }}
前端設(shè)計思路: 1.如果if條件 滿足,則把數(shù)據(jù)填充在該div上. <div style="width: 245px;float: left"> {% for item in queryset_dict %} {% if filter模版語言返回結(jié)果 %} <div style="width: 245px;" > <img src="/{{ item.student__pic }}" alt="" style="width: 245px;height: 250px"> <p>{{ item.student__name }}</p> <p>{{ item.letter_of_thanks }}</p> </div> {% endif %} {% endfor %} </div>  2.filter 用法: 默認(rèn)只允許 傳入2個參數(shù),如果傳入?yún)?shù)過多,就傳入字符串,然后分割! @register.filter def image_show2(value,arg): countet = value # 當(dāng)前for循環(huán)次數(shù) allcount = int(arg.split(',')[0]) # 前端頁面列數(shù) remainder = int(arg.split(',')[1]) # 余數(shù) if countet%allcount == remainder: return True else: return False 3.filter使用方法: {{ 參數(shù)1 | filter :參數(shù)2 }}
4.前端頁面: <div style="width: 245px;float: left"> {% for item in queryset_dict %} {% if forloop.counter|image_show2:"4,0" %} <div style="width: 245px;" > <img src="/{{ item.student__pic }}" alt="" style="width: 245px;height: 250px"> <p>{{ item.student__name }}</p> <p>{{ item.letter_of_thanks }}</p> </div> {% endif %} {% endfor %} </div> 注意: img標(biāo)簽的 src 地址斜杠 / 實(shí)現(xiàn)方式三: JQ中Ajax實(shí)現(xiàn) 設(shè)計思路: 1.訪問頁面, 2.自動發(fā)送ajax請求 3.ajax獲取數(shù)據(jù) 4.求余判斷,生成標(biāo)簽.頁面添加標(biāo)簽 實(shí)現(xiàn)方法: 1.后臺判斷,Ajax發(fā)送的POST請求, => 數(shù)據(jù)庫查詢獲取數(shù)據(jù),
View Code注意: 后臺獲取的數(shù)據(jù)形式為 QuerySet[{數(shù)據(jù)1},{數(shù)據(jù)2}] , 需要先轉(zhuǎn)換成列表形式 再json.dumps() 2.json返回前端. 3.前端JQ創(chuàng)建標(biāo)簽,填充數(shù)據(jù),把標(biāo)簽添加到div1,div2,...上
View Code完整代碼:
后臺代碼
前端頁面
|
|
|
