需求分析
如今是 "圖片爲王"的時代，在瀏覽一些網站時，常常會看到相似於這種滿屏都是圖片。圖片大小不一，卻按空間排列，就這是瀑布流佈局。javascript
- 以瀑布流形式佈局，從數據庫中取出圖片
- 每次取出等量（7 條）的圖片，加載到頁面
- 當滑輪滾動到最底端時，自動再加載圖片
實現流程css
- 以包形式管理模型
- 將圖片自動上傳到靜態文件
static - 前端頁面每行排列四張圖片（四個 div ）
- 當頁面加載時，以 ajax 形式自動向後臺發送請求，獲取圖片數據，再用 js 循環生成 img 標籤添加到每一個 div 中
- JS 循環圖片信息列表，將當前循環元素的索引與每行排列的圖片數目（4張）求餘數，再利用餘數定位每一個 div 標籤
模型設計
在這裏，我以包的形式管理模型 models，編寫 app/models/video/img_models.py：html
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='標題')
summary = models.CharField(max_length=128, verbose_name='簡介')
class Meta:
verbose_name_plural = '圖片'
def __str__(self):
return self.title
視圖函數
編寫 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 的數據
img_list = Img.objects.filter(id__gt=nid, id__lt=postion_id).values('id', 'title', 'src')
img_list = list(img_list) # 將字典格式轉換爲列表形式
ret = {
'status': True,
'data': img_list
}
return JsonResponse(ret)
在後臺取出符合條件的數據，而後打包成 JSON 格式數據，前端模板再經過 jQuery 將其循環生成 img 標籤，並添加到 div 標籤中。java
模板
編寫 app/templates/app/img.html：python
{% 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>
<h1>瀑布流</h1>
<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; // 循環最後那個的位置 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 // 也就是給第1、2、3、四給 div 添加 img 標籤，eq(0) 爲第一個 $('#container').children().eq(n).append(img); if (index + 1 == img_list.length){ console.log(n, value.id); LASTPOSTION = n; {# NID = value.id;#} } }); } } }) } // 監聽滑輪 $(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>
settings 配置
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
# templates 設置
'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'
# 由於讓模板可以找到 static 中圖片，添加了 /app
STATIC_URL = '/app/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'app', 'static'),
)
TEMPLATE_DIRS = (os.path.join(BASE_DIR, 'app', 'templates'),)
urlconf 配置
這是個人 app/urls.py：jquery
# 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'),
]
包管理模型
整個項目的模型部分，以包的形式管理，有些功能部分單獨設計模型文件，所以要在包文件中導入相應模型。ajax
編寫 app/models/video/__init__.py：數據庫
from app.models.video.img_models import Img
使用對象封裝全局變量
在上面 JS 代碼中，咱們使用了全局變量，實際開發中應該儘可能避免使用全局變量，在這裏用對象將其封裝。django
// 全局變量封裝
$(function () {
var obj = new ScrollImg(); // 定義一個對象
obj.fetchImg();
obj.scrollEvent();
});
// 對象 ScrollImg
function ScrollImg() {
// 將以前的全局變量封裝在對象內部，僅其內部能使用
this.NID = 0;
this.LASTPOSITION = 3;
// 向後臺發送 ajax 請求，獲取圖片信息
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 傳到後臺，再根據這個條件取 7 條數據
that.NID = value.id;
}
});
}
})
};
this.scrollEvent = function () {
var that = this;
// 監聽滑輪，當滑輪高度+窗口高度==文檔高度時，即表示滑輪已經滑動到最底部，再執行 fetchImg() 函數，再從數據庫取出數據
$(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();
}
})
}
}
這是整個項目大體分佈：