饮冰三年-人工智能-Python-29瀑布流

多适用于：整版以图片为主，大小不一的图片按照一定的规律排列的网页布局。

1：创建model类，并生成数据表 

from django.db import models

# Create your models here.
# 图片表
class Img(models.Model):
    url=models.FileField(max_length=32,verbose_name="图片路径",upload_to='static/upload')
    title=models.CharField(max_length=16,verbose_name='标题')
    summary=models.CharField(max_length=128,verbose_name='简介')

    class Meta:
        verbose_name_plural='图片'

    def __str__(self):
        return self.title

2：注册到django后台管理页面中，并创建管理员

from django.contrib import admin
from app01 import models
# Register your models here.
admin.site.register(models.Img)

3：添加对应的文件夹，修改settings配置，准备数据

"""
Django settings for WaterfallFlow project.

Generated by 'django-admin startproject' using Django 2.1.5.

For more information on this file, see
https://docs.djangoproject.com/en/2.1/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/2.1/ref/settings/
"""

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.1/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'p5)q997@c#&(xtv79l24+(u-%3z$=ozv4_khe4$sz)$z$f=8cx'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app01.apps.App01Config',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'WaterfallFlow.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        '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',
            ],
        },
    },
]

WSGI_APPLICATION = 'WaterfallFlow.wsgi.application'


# Database
# https://docs.djangoproject.com/en/2.1/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}


# Password validation
# https://docs.djangoproject.com/en/2.1/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/2.1/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.1/howto/static-files/

STATIC_URL = '/static/'

STATICFILES_DIRS=(
    os.path.join(BASE_DIR,'static'),
)

 4:url配置

"""WaterfallFlow URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.conf.urls import url
from django.urls import path
from app01.ImgTest import ImgView

urlpatterns = [
    # path('admin/', admin.site.urls),
    url(r'^admin/', admin.site.urls),
    url(r'^img1.html$',ImgView.img1),
    url(r'^getImgs$', ImgView.getImgs),


]

5：View设置

from django.shortcuts import render
from django.http import JsonResponse
from app01.models import Img

# Create your views here.
def img1(request):
    return render(request,"ImgTest/img1.html")

def getImgs(request):
    nid = request.GET.get('nid')
    img_list = Img.objects.filter(id__gt=nid).values('id','url','title')
    img_list=list(img_list)
    print(img_list)
    ret = {'status':True,'data':img_list}
    return JsonResponse(ret)

6：html 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery-3.3.1.min.js"></script>
    <style>
        .w {
             1000px;
            margin: 0px;
        }

        .item {
             25%;
            float: left;
        }

        .item img {
             100%;
        }
    </style>
</head>
<body>
<div class="w" id="container">

    <div class="item">11
    </div>
    <div class="item">22
    </div>
    <div class="item">33
    </div>
    <div class="item">44
    </div>

</div>
<script>
    $(function(){
        initImg();
    })
    var nd=0;
    function initImg() {
        $.ajax({
            url:'getImgs',
            type:"GET",
            data:{nid:nd},
            datatype:'json',
            success:function(arg){
                var img_list=arg.data;
                $.each(img_list,function(index,v){
                    var eqv=index%4;
                    var tag = document.createElement("img");
                    tag.src='/'+v.url;
                    $("#container").children().eq(eqv).append(tag)
                })
            }
        })
    }
</script>
</body>
</html>

 以上这种方法有个弊端是：一次获取所有的数据库数据。完善：只完善部分数据，当滚轮滚到页面最下方的时候再次请求数据获取数据。

from django.shortcuts import render
from django.http import JsonResponse
from app01.models import Img
from django.db.models import Q


# Create your views here.
def img1(request):
    return render(request,"ImgTest/img1.html")

def getImgs(request):
    nid = request.GET.get('nid')
    nid2=int(nid)+10
    img_list = Img.objects.filter(Q(id__gt=nid)&Q(id__lt=nid2)).values('id','url')
    img_list=list(img_list)
    print(img_list)
    ret = {'status':True,'data':img_list}
    return JsonResponse(ret)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery-3.3.1.min.js"></script>
    <style>
        .w {
             1000px;
            margin: 0px;
        }

        .item {
             25%;
            float: left;
        }

        .item img {
             100%;
        }
    </style>
</head>
<body>
<div class="w" id="container">

    <div class="item">11
    </div>
    <div class="item">22
    </div>
    <div class="item">33
    </div>
    <div class="item">44
    </div>

</div>
<script>
    $(function () {
        initImg();
        scrollEvent();
    })
    var nd = 0;

    function initImg() {
        $.ajax({
            url: 'getImgs',
            type: "GET",
            data: {nid: nd},
            datatype: 'json',
            success: function (arg) {
                var img_list = arg.data;
                $.each(img_list, function (index, v) {
                    var eqv = index % 4;
                    var tag = document.createElement("img");
                    tag.src = '/' + v.url;
                    $("#container").children().eq(eqv).append(tag)
                    //当循环到最后一个图片时，将图片的id赋值给nd
                    if(index+1==img_list.length){
                        nd=v.id;
                    }
                })
            }
        })
    }

    {#当滚轮滚动到底部时，执行initImg()#}

    function scrollEvent() {
        $(window).scroll(function () {
                //什么时候表示滚动到底部
                {#文档高度= 窗口高度+滚动条高度#}
                var docHeight=$(document).height();//文档高度
                var winHeight=$(window).height();//窗口高度
                var scrHeight = $(window).scrollTop();//滚动条高度
                if (winHeight+scrHeight==docHeight){
                    console.log(1)
                    initImg();
                }

            }
        )
    }

</script>
</body>
</html>

以上这种方法还有瑕疵，就是：定义了公共属性nd，我们可以把公共属性nd封装到对象中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery-3.3.1.min.js"></script>
    <style>
        .w {
             1000px;
            margin: 0px;
        }

        .item {
             25%;
            float: left;
        }

        .item img {
             100%;
        }
    </style>
</head>
<body>
<div class="w" id="container">

    <div class="item">11
    </div>
    <div class="item">22
    </div>
    <div class="item">33
    </div>
    <div class="item">44
    </div>

</div>
<script>
    $(function () {
        var obj = new ScrollImg();
        obj.initImg();
        obj.scrollEvent();
    })

    function ScrollImg() {
        {#为了去掉全局变量，创建一个新类#}
        this.id = 0;
        this.initImg = function () {
            var that = this;
            $.ajax({
                url: 'getImgs',
                type: "GET",
                data: {nid: that.id},
                datatype: 'json',
                success: function (arg) {
                    var img_list = arg.data;
                    $.each(img_list, function (index, v) {
                        var eqv = index % 4;
                        var tag = document.createElement("img");
                        tag.src = '/' + v.url;
                        $("#container").children().eq(eqv).append(tag)
                        //当循环到最后一个图片时，将图片的id赋值给nd
                        if (index + 1 == img_list.length) {
                            that.id = v.id;
                        }
                    })
                }
            })
        }
        this.scrollEvent = function () {
            {#当滚轮滚动到底部时，执行initImg()#}
            var that = this;
            $(window).scroll(function () {
                    //什么时候表示滚动到底部
                    {#文档高度= 窗口高度+滚动条高度#}
                    var docHeight = $(document).height();//文档高度
                    var winHeight = $(window).height();//窗口高度
                    var scrHeight = $(window).scrollTop();//滚动条高度
                    if (winHeight + scrHeight == docHeight) {
                        console.log(1)
                        that.initImg();
                    }
                }
            )
        }
    }

</script>
</body>
</html>