以包形式管理模型
將圖片自動(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)簽

模型設(shè)計(jì)

在這里，我以包的形式管理模型 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

視圖函數(shù)

編寫(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>
    <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;    // 循環(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>

settings 配置

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)樽屇０迥軌蛘业?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：

# 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

使用對(duì)象封裝全局變量

在上面 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)目大致分布：