溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Django瀑布流如何實(shí)現(xiàn)”，在日常操作中，相信很多人在Django瀑布流如何實(shí)現(xiàn)問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Django瀑布流如何實(shí)現(xiàn)”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
以瀑布流形式布局，從數(shù)據(jù)庫(kù)中取出圖片
每次取出等量（7 條）的圖片，加載到頁(yè)面
當(dāng)滑輪滾動(dòng)到最底端時(shí)，自動(dòng)再加載圖片
以包形式管理模型
將圖片自動(dòng)上傳到靜態(tài)文件 static
前端頁(yè)面每行排列四張圖片（四個(gè) div ）
當(dāng)頁(yè)面加載時(shí)，以 ajax 形式自動(dòng)向后臺(tái)發(fā)送請(qǐng)求，獲取圖片數(shù)據(jù)，再用 js 循環(huán)生成 img 標(biāo)簽添加到每個(gè) div 中
JS 循環(huán)圖片信息列表，將當(dāng)前循環(huán)元素的索引與每行排列的圖片數(shù)目（4張）求余數(shù)，再利用余數(shù)定位每個(gè) div 標(biāo)簽
在這里，我以包的形式管理模型 models，編寫(xiě) app/models/video/img_models.py：
from django.db import models class Img(models.Model): """ upload_to: 上傳文件地址 """ src = models.FileField(max_length=64, verbose_name='圖片地址', upload_to='app/static/app/upload') title = models.CharField(max_length=64, verbose_name='標(biāo)題') summary = models.CharField(max_length=128, verbose_name='簡(jiǎn)介') class Meta: verbose_name_plural = '圖片' def __str__(self): return self.title
編寫(xiě) app/views.py：
from django.shortcuts import render
from django.http import JsonResponse
from app.models.video.img_models import Img
def img(request):
return render(request, 'app/img.html')
def getImgs(request):
nid = request.GET.get('nid')
print(nid)
# nid 第一次取為 0，每次取 7 條
last_position_id = int(nid) + 7
postion_id = str(last_position_id)
# 獲取 0 < id < 7 的數(shù)據(jù)
img_list = Img.objects.filter(id__gt=nid, id__lt=postion_id).values('id', 'title', 'src')
img_list = list(img_list) # 將字典格式轉(zhuǎn)換為列表形式
ret = {
'status': True,
'data': img_list
}
return JsonResponse(ret)在后臺(tái)取出符合條件的數(shù)據(jù)，然后打包成 JSON 格式數(shù)據(jù)，前端模板再通過(guò) jQuery 將其循環(huán)生成 img 標(biāo)簽，并添加到 div 標(biāo)簽中。
編寫(xiě) app/templates/app/img.html：
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style type="text/css">
.box1{
width: 1000px;
margin: 0 auto;
}
.box1 .item{
width: 25%;
float: left;
}
.item img{
width: 100%;
}
</style>
</head>
<body>
<h2>瀑布流</h2>
<div class="box1" id="container">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
<script src="{% static 'app/jquery/jquery-3.1.1.js' %}"></script>
<script>
$(function () {
initImg();
scroll();
});
NID = 0;
LASTPOSTION = 3; // 循環(huán)最后那個(gè)的位置
function initImg() {
$.ajax({
url: '/app/getImgs/',
type: 'GET',
data: {nid: NID},
dataType: 'JSON',
success: function (arg) {
if (arg.status){
var img_list = arg.data;
$.each(img_list, function (index, value) {
var n = (index + LASTPOSTION + 1) % 4;
{# console.log(n); // 0、1 、2 、3 一直為 0、1 、2 、3#}
var img = document.createElement('img');
img.src = '/' + value.src; // app/static/app/upload/7.jpg
// 也就是給第一、二、三、四給 div 添加 img 標(biāo)簽，eq(0) 為第一個(gè)
$('#container').children().eq(n).append(img);
if (index + 1 == img_list.length){
console.log(n, value.id);
LASTPOSTION = n;
{# NID = value.id;#}
}
});
}
}
})
}
// 監(jiān)聽(tīng)滑輪
$(window).scroll(function () {
// 文檔高度
var doc_height = $(document).height();
// 窗口高度
var window_height = $(window).height();
// 滑輪高度
var scroll_height = $(window).scrollTop();
if (window_height + scroll_height == doc_height){
initImg();
}
})
</script>
</body>
</html>TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
# templates 設(shè)置
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
# 因?yàn)樽屇０迥軌蛘业?nbsp;static 中圖片，添加了 /app
STATIC_URL = '/app/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'app', 'static'),
)
TEMPLATE_DIRS = (os.path.join(BASE_DIR, 'app', 'templates'),)這是我的 app/urls.py：
# Project/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('app/', include('app.urls')),
]
# app/urls.py
from django.urls import path
from app import views
urlpatterns = [
path('img/', views.img, name='img'),
path('getImgs/', views.getImgs, name='getImgs'),
]整個(gè)項(xiàng)目的模型部分，以包的形式管理，有些功能部分單獨(dú)設(shè)計(jì)模型文件，因此要在包文件中導(dǎo)入相應(yīng)模型。
編寫(xiě) app/models/video/__init__.py：
from app.models.video.img_models import Img
在上面 JS 代碼中，我們使用了全局變量，實(shí)際開(kāi)發(fā)中應(yīng)該盡量避免使用全局變量，在這里用對(duì)象將其封裝。
// 全局變量封裝
$(function () {
var obj = new ScrollImg(); // 定義一個(gè)對(duì)象
obj.fetchImg();
obj.scrollEvent();
});
// 對(duì)象 ScrollImg
function ScrollImg() {
// 將之前的全局變量封裝在對(duì)象內(nèi)部，僅其內(nèi)部能使用
this.NID = 0;
this.LASTPOSITION = 3;
// 向后臺(tái)發(fā)送 ajax 請(qǐng)求，獲取圖片信息
this.fetchImg = function () {
var that = this;
$.ajax({
url: '/app/getImgs/',
type: 'GET',
data: {nid: that.NID},
dataType: 'JSON',
success: function (arg) {
var img_list = arg.data;
$.each(img_list, function (index, value) {
var n = (index + that.LASTPOSITION + 1) % 4;
var img = document.createElement('img');
img.src = '/' + value.src;
$('#container').children().eq(n).append(img);
if (index + 1 == img_list.length) {
that.LASTPOSITION = n;
// 每取完一次，便把最后那條的 id 賦值給 NID 傳到后臺(tái)，再根據(jù)這個(gè)條件取 7 條數(shù)據(jù)
that.NID = value.id;
}
});
}
})
};
this.scrollEvent = function () {
var that = this;
// 監(jiān)聽(tīng)滑輪，當(dāng)滑輪高度+窗口高度==文檔高度時(shí)，即表示滑輪已經(jīng)滑動(dòng)到最底部，再執(zhí)行 fetchImg() 函數(shù)，再?gòu)臄?shù)據(jù)庫(kù)取出數(shù)據(jù)
$(window).scroll(function () {
var scroll_height = $(window).scrollTop();
var window_height = $(window).height();
var doc_height = $(document).height();
if (scroll_height + window_height == doc_height ) {
that.fetchImg();
}
})
}
}這是整個(gè)項(xiàng)目大致分布：
到此，關(guān)于“Django瀑布流如何實(shí)現(xiàn)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼