首页 / PYTHON / 饮冰三年-人工智能-Python-29瀑布流

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了饮冰三年-人工智能-Python-29瀑布流，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8757字，纯文字阅读大概需要13分钟。

内容图文

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

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

model

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

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

admin.py

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'),
)

Setting.py

饮冰三年-人工智能-Python-29瀑布流 - 文章图片

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),


]

url配置

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)

Views

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 {
            width: 1000px;
            margin: 0px;
        }

        .item {
            width: 25%;
            float: left;
        }

        .item img {
            width: 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>

img1.html

饮冰三年-人工智能-Python-29瀑布流 - 文章图片

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

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)

view

<!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 {
            width: 1000px;
            margin: 0px;
        }

        .item {
            width: 25%;
            float: left;
        }

        .item img {
            width: 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>

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 {
            width: 1000px;
            margin: 0px;
        }

        .item {
            width: 25%;
            float: left;
        }

        .item img {
            width: 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>

html

内容总结

以上是互联网集市为您收集整理的饮冰三年-人工智能-Python-29瀑布流全部内容，希望文章能够帮你解决饮冰三年-人工智能-Python-29瀑布流所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/841062.html

来源：【匿名】

【上一篇】饮冰三年-人工智能-Python-27 Django Form组件【下一篇】浅谈PHP运行Python脚本的方法

更多 ►

【饮冰三年-人工智能-Python-29瀑布流】教程文章相关的互联网学习教程文章

饮冰三年-人工智能-Python-46 Python之初识ECMAScript6【代码】

一、ECMAScript与JavaScript 的关系前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。二、let和const命令 1、let与var　　var:变量提升与 let:块级作用域<script>console.log(a) //输出结果： undefinedconsole.log(b) //直接报错： Uncaught ReferenceError: Cannot access ‘b‘ before initializationvar a = "Hello,World";let b ="Hello,ECMA6" </script>var变量提升<script>{var a = "Hello,W...

Python人工智能之图片识别，Python3一行代码实现图片文字识别【图】

1.Python人工智能之图片识别，Python3一行代码实现图片文字识别2.tesseract-ocr安装包和中文语言包注意：原文：https://www.cnblogs.com/jycjy/p/8799295.html

哈佛大学《CS50 Python人工智能入门》公开课 (2020)

课程介绍本课程探讨现代人工智能基础上的概念和算法，深入探讨游戏引擎、手写识别和机器翻译等技术的思想。通过实践项目，学生在将图形搜索算法、分类、优化、强化学习以及其他人工智能和机器学习的主题融入到他们自己的Python程序中，从而获得图形搜索算法、分类、优化和强化学习背后的理论知识。课程结束时，学生将获得机器学习库的经验，以及人工智能原理的知识，使他们能够设计自己的智能系统。目录搜索（Search）知识（Knowle...

Python爬虫人工智能大数据全栈视频史上最全合辑教程分享！【图】

Python爬虫人工智能大数据全栈视频史上最全合辑教程分享！毫无疑问Python是这两年最火的编程语言，不仅容易上手，且在多个行业都可应用。尤其今年人工智能及大数据的发展，Python将会展现更多的实用性！如果你是小白想改变自己的职业方向，抓紧时间上车…精心整理的资料和课程都在下面!Python全栈作为小白，想要快速入门，并且励志做python全栈工程师的话，这个视频课程非常适合入手：获取统一设置在文末，欢迎查阅！大数据、云计算...

《自兴人工智能》python猜数字【代码】

def Text(): import random #导入随机模块 print ‘-----猜字游戏----‘ print ‘输入范围1~100‘ sui=random.randint(1,100)#设置随机数的取值范围 num=0#输入的值 count=0#猜测次数 while num!=sui: num=input(‘输入一个值:‘) if num>0 and num<=100: if sui>num: print ‘输入的值过小‘ if sui<num: print ‘输入的值过大‘ ...

PYTHON - 技术教程分类

Python3 教程 Python3 简介 Python3 环境搭建 Python3 基础语法 Python3 基本数据类型 Python3 解释器 Python3 注释 Python3 运算符 Python3 数字(Number) Python3 字符串 Python3 列表 Python3 元组 Python3 字典 Python3 集合 Python3 编程第一步 Python3 条件控制 Python3 循环语句 Python3 迭代器与生成器 Python3 函数 Python3 数据结构 Python3 模块 Python3 输入和输出 Python3 File Python3 OS Python3 错误和异常 Python3 面向对象 Python3 命名空间/作用域 Python3 标准库概览 Python3 实例 Python3 CGI编程 Python3 MySQL(PyMySQL) Python3 网络编程 Python3 SMTP发送邮件 Python3 多线程 Python3 日期和时间 Python3 内置函数 Python3 MongoDB Python3 urllib python 全部

PYTHON - 最热教程

python如何统计字符串中字母个数？使用Python进行微信公众号开发（三）回...Python+PyQT5的子线程更新UI界面的实例 python时间戳怎么获得？如何获得当前时...vscode调试python时提示无法将“conda”...python接口自动化全局变量access_token...python收取邮件(腾讯企业邮箱)python如何绘制降水图详解python并发获取snmp信息及性能测试...怎么卸载Python3.6？

首页 / PYTHON / 饮冰三年-人工智能-Python-29瀑布流

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【饮冰三年-人工智能-Python-29瀑布流】教程文章相关的互联网学习教程文章

饮冰三年-人工智能-Python-46 Python之初识ECMAScript6【代码】

Python人工智能之图片识别，Python3一行代码实现图片文字识别【图】

哈佛大学《CS50 Python人工智能入门》公开课 (2020)

Python爬虫人工智能大数据全栈视频史上最全合辑教程分享！【图】

《自兴人工智能》python猜数字【代码】

有了Python+树莓派，我也做了款人工智能相机！【图】

最全Python培训课程，基础班+高级就业班+课件(数据分析、深度学习、爬虫、人工智能等) 精品课程

Python3入门人工智能掌握机器学习深度学习提升实战能力9:深度学习之循环神经网络【图】

Python3入门人工智能掌握机器学习深度学习提升实战能力8:深度学习之卷积神经网络【图】

Python3入门人工智能掌握机器学习+深度学习提升实战能力

AI人工智能时代基础实战python机器学习深度学习算法视频教程

人工智能一之TensorFlow环境配置

基于Python玩转人工智能最火框架 TensorFlow应用实践【图】

python如何用于人工智能【图】

为什么人工智能用python【图】

PYTHON - 相关标签

PYTHON - 技术教程分类

PYTHON - 最新教程

PYTHON - 最热教程