settings中的配置不再详细说明

一.路由代码

from django.contrib import admin

from django.conf.urls import url

from app import views

urlpatterns=[

    url(r'^admin',admin.site.urls),

    # 页面显示get请求

    url(r'^imgs.html$',views.imgs),

    # 获取图片的ajax请求

    url(r'^get_imgs.html$',views.get_imgs),

]

二.视图函数

from app import models

from django.http import JsonResponse

from django.shortcuts import render

def imgs(request):

    return render(request, 'img.html')

def get_imgs(request):

    nid = request.GET.get('nid')

    # id__gt=nid表示查询id大于多少的数据,nid由模板的ajax传过来

    img_list = models.Img.objects.filter(id__gt=nid).values('id', 'src', 'title')

    # queryset对象转列表

    img_list = list(img_list)

    ret = {

        'status': True,

        'data': img_list

    }

    return JsonResponse(ret)

三.models代码

from django.db import models

# Create your models here.

class Img(models.Model):

    src = 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

四.模板代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .w {

            width: 1000px;

            margin: 0 auto;

        }

        .item {

            width: 25%;

            float: left;

        }

        .item img {

            width: 100%;

        }

    </style>

</head>

<body>

<div>图片</div>

<div class="w" id="container">

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

</div>

<script src="/static/JS/jquery-3.3.1.min.js"></script>

<script>

    $(function () {

        var obj = new ScrollImg();

        obj.fetchImg();

        obj.scrollEvent();

    });

    function ScrollImg() {

        this.NID = 0;

        this.LASTPOSITION = 3;

        this.fetchImg = function () {

            var that = this;

            $.ajax({

                url: '/get_imgs.html',

                type: 'GET',

                //前端传到后台的获取数据量

                data: {nid: that.NID},

                dataType: 'JSON',

                success: function (arg) {

                    var img_list = arg.data;

                    //循环列表获取index:索引,v:图片信息(id,src,title)

                    $.each(img_list, function (index, v) {

                        //取4的余数,始终返回的是0,1,2,3的索引

                        var eqv = (index + that.LASTPOSITION + 1) % 4;

                        console.log(eqv);

                        //创建img标签

                        var tag = document.createElement('img');

                        //img标签的src地址等于图片的src地址

                        tag.src = '/' + v.src;

                        $('#container').children().eq(eqv).append(tag);

                        //如果index是最后一个,

                        if (index + 1 == img_list.length) {

                            //测试使用,始终只取开始那几条数据

                            that.LASTPOSITION = eqv;

                            //取完该页面显示的条数后,再去后面的条数

                            //that.NID = v.id;

                        }

                    })

                }

            })

        };

        this.scrollEvent = function () {

            var that = this;

            //绑定滚轮事件

            $(window).scroll(function () {

                //滚动条可滑动的高度

                var scrollTop = $(window).scrollTop();

                //窗口高度

                var winHeight = $(window).height();

                //文档高度

                var docHeight = $(document).height();

                //如果滑到最后,执行获取图片

                if (scrollTop + winHeight == docHeight) {

                    that.fetchImg();

                }

            })

        }

    }

</script>

</body>

</html>

django模板中使用JQ代码实现瀑布流显示效果的更多相关文章

  1. 在 Django 模板中遍历复杂数据结构的关键是句点字符

    在 Django 模板中遍历复杂数据结构的关键是句点字符 ( . ). 实例二 mysit/templates/myhtml2.html修改如下 <!DOCTYPE html> <h ...

  2. django模板中的extends和include使用方法

    一.extends使用方法 首先extends也就是继承,子类继承父类的一些特性.在django模板中通过继承可以减少重复代码. 首先我们建立一个app,名字叫做hello.别忘了在settings. ...

  3. django 模板中定义临时列表

    <ul class="num_t clr"> {% for obj in ""|ljust:"10" %} <li> ...

  4. Django 模板中引用静态资源（js,css等）

    Django 模板中免不了要用到一些js和CSS文件,查了很多网页,被弄得略晕乎,还是官网靠谱,给个链接大家可以自己看英文的. https://docs.djangoproject.com/en/1. ...

  5. Django 模板中使用css, javascript

    Django 模板中使用css, javascript (r'^css/(?Ppath.*)$', 'django.views.static.serve', {'document_root': '/v ...

  6. 如何在smarty模板中执行php代码

    Smarty模板主要的目的是分离逻辑层和表现层,所以在模板中不应该包含逻辑部分,逻辑层也不应该含有HTML.要在模板中插入逻辑程序的这种做法"非常"不被推荐,在你的case中. 如 ...

  7. django模板中变更数据库信息后，如何把变更后的信息同步更新到数据库

    我们在基于django开发项目的过程中,经常会遇到数据库表字段增加,删除,或者修改的情况,以及字段属性更改的情况,因为django基于ORM模式来操作数据库的, 传统上如果django项目中的数据库m ...

  8. Django 模板中 include 标签使用小结

    include 标签允许在模板中包含其它的模板的内容. 标签的参数是所要包含的模板名称,可以是一个变量,也可以是用单/双引号硬编码的字符串. 每当在多个模板中出现相同的代码时,就应该考虑是否要使用 { ...

  9. 测试开发之Django——No6.Django模板中的标签语言

    模板中的标签语言 1.if/else {% if  %} 标签检查(evaluate)一个变量,如果这个变量为真(即:变量存在,非空,不是布尔值假),系统会显示在{% if  %} 和 {% endi ...

随机推荐

  1. python爬虫scrapy之downloader_middleware设置proxy代理

    一.背景: 小编在爬虫的时候肯定会遇到被封杀的情况,昨天爬了一个网站,刚开始是可以了,在settings的设置DEFAULT_REQUEST_HEADERS伪装自己是chrome浏览器,刚开始是可以的 ...

  2. Golang的时间生成，格式化，以及获取函数执行时间的方法

    最近都在通过完成一些列功能强化自己对常用api的熟悉. 然而关于时间的api几乎是最常用的api类型,所以总结一些常用的. 以YY-mm-dd HH:MM:SS.9位 输出当前时间: func mai ...

  3. mysql 分库分表备份脚本

    #!/bin/bash USER=root #用户 PASSWORD=123456 #密码 MYSQL_PATH=127.0.0.1 #地址 MYSQL_BIN=/bin/mysql MYSQL_DU ...

  4. Python：matplotlib绘制散点图

    与线型图类似的是,散点图也是一个个点集构成的.但不同之处在于,散点图的各点之间不会按照前后关系以线条连接起来. 用plt.plot画散点图     奇怪,代码和前面的例子差不多,为什么这里显示的却是散 ...

  5. linux的使用

    第一 安装ubuntu操作系统 1. ubuntu下解决中英文输入法问题 问题: ubuntu在安装了搜狗输入法后无法切换英文,即使在搜狗输入法中设置了切换按键依然无反应, 原因在于当前系统中只有一个 ...

  6. vue 條件語句

    條件判斷使用v-if.v-else-if.v-else. v-show

  7. MySQL函数GROUP_CONCAT

    该函数返回带有来自一个组的连接的非NULL值的字符串结果.该函数是一个增强的Sybase SQL Anywhere支持的基本LIST()函数. 语法结构: GROUP_CONCAT([DISTINCT ...

  8. Linux系统下手把手完成无人值守安装服务

    刚入职的运维新手经常会被要求去做一些安装操作系统的工作,如果按照用镜像光盘安装操作系统,效率会相当低下.那么如何提升效率,搭建出一套可以批量安装Linux系统的无人值守的安装系统? PXE+TFTP+ ...

  9. Windows下安装Ubuntu 16.04双系统

    本文已有更新:新文章 [2016-05-09 更新说明: ①:我原本写的Ubuntu 16.04安装博客中在安装系统时,在引导项部分,有一点问题没有注意到,感谢@小段阿誉的指出,在下面我有了说明: ② ...

  10. C语言实现字符串逆序输出

    方法一: #include <stdio.h> #include <stdlib.h> #include <string.h> void Reverse(char ...