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设计模式第六天【原型模式】

    1.定义 使用原型模式复制的对象与原来对象具有一样的结构和数据,有浅克隆和深克隆 2.应用场景 (1)希望复制原来对象的结构和数据胆步影响原来对象 3.代码实现 #!/usr/bin/env pyth ...

  2. Yii2的使用

    yii2的下载安装 使用下载好的文件配置高级模板,在配置文件配置好数据库和gii 在common模板配置db: 在backend模板配置gii: 配置nginx服务器访问backend和fronten ...

  3. Javascript 实现复制（Copy）动作方法大全

    一.实现点击按钮,复制文本框中的的内容 <script type="text/javascript"> function copyUrl2() { var Url2=d ...

  4. Tunnel Warfare（线段树取连续区间）

    emmmmmmmm我菜爆了 思路来自:https://blog.csdn.net/chudongfang2015/article/details/52133243 线段树最难的应该就是要维护什么东西 ...

  5. codeforces401C

    Team CodeForces - 401C Now it's time of Olympiads. Vanya and Egor decided to make his own team to ta ...

  6. Tyche 2147 旅行

    题目描述 你有m元钱,将要游览n个国家.每一个国家有一种商品,其中第i个国家商品的单价为ai元.每到一个国家,你会用手上的钱疯狂购买这个国家的商品,直到剩余的钱无法购买为止. 现在你要决定游览这n个国 ...

  7. Python 面试题_未完

    基础部分 1. 为什么学习Python 家里有在这个IT圈子里面,也想让我接触这个圈子,然后给我建议学的Python, 然后自己通过百度和向有学过Python的同学了解了Python,Python这门 ...

  8. MT【244】调和分割

    已知椭圆方程:$\dfrac{x^2}{4}+\dfrac{y^2}{3}=1$,过点$P(1,1)$的两条直线分别与椭圆交于点$A,C$和$B,D$,且满足$\overrightarrow{AP}= ...

  9. 【题解】 bzoj3693: 圆桌会议 （线段树+霍尔定理）

    bzoj3693 Solution: 显然我们可以把人和位置抽象成点,就成了一个二分图,然后就可以用霍尔定理判断是否能有解 一开始我随便YY了一个\(check\)的方法:就是每次向后一组,我们就把那 ...

  10. zabbix监控概念

    监控:数据采集 --> 数据存储 -->  数据展示 报警:采集到的数据超出阈值 SNMP:Simple Network Management Protocol(只能实现数据采集) NMS ...