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. python3 自动识图

    一.安装依赖库 pip install pytesseract pip install pillow 二.安装识图引擎tesseract-ocr https://pan.baidu.com/s/1Qa ...

  2. 销售合同金额数据从Excel导入

    一.业务需求 1.新增了销售合同金额的字段,但是老数据没有这个字段:所以销售合同金额从销售合同附件的各品种金额之和. 2.制作好excel字段模板,将此模板发送给销售业务部门来统计并完成excel表格 ...

  3. codeforces467C

    George and Job CodeForces - 467C The new ITone 6 has been released recently and George got really ke ...

  4. codeforces740B

    Alyona and flowers CodeForces - 740B Little Alyona is celebrating Happy Birthday! Her mother has an ...

  5. Centos安装python3

    安装环境 系统:阿里云服务器centos7.5系统 看见好多博客对centos安装python3的方式各不相同且都不完整,今天我来完整的演示安装python3 1.下载python3源码包 命令 wg ...

  6. .net core 2.0 Autofac

    参考自 https://github.com/VictorTzeng/Zxw.Framework.NetCore 安装Autofac,在`project.csproj`加入 <PackageRe ...

  7. GitHub大佬：供计算机学习鉴黄功能的图片数据库

    ps:学无止境 想要构建一套鉴黄系统,必须有大量的真实图片供计算机进行学习,以便于区分开正常图片和黄色图片. 近期有位加拿大程序员在Github上传了图片列表,里面包含了大量图片地址可以供计算机进行学 ...

  8. kubernetes 外部访问集群暴露端口服务

    在yaml文件中多个不同类型资源可以用“---”在划分 name: httpd2-svc namespace: kube-public    #给资源分配网络   所用资源将在 kube-public ...

  9. 进程间的通讯————IPC

    """ IPC 指的是进程间通讯 之所以开启子进程 肯定需要它帮我们完成任务 很多情况下 需要将数据返回给父进程 然而 进程内存是物理隔离的 解决方案: 1.将共享数据放 ...

  10. 【XSY2771】城市 分治

    题目描述 一个平原上有\(n\)个城市,第\(i\)个城市在点\((\cos \frac{2i\pi}{n},\sin \frac{2i\pi}{n})\)上. 每个城市和最近的两个城市有一条直线段的 ...