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. Apache的commons工具类

    package cn.zhou; import java.io.File; import java.io.IOException; import org.apache.commons.io.FileU ...

  2. 使用layui 做后台管理界面，在Tab中的链接点击后添加一个新TAB的解决方法

    给链接或按钮  添加 onclick="self.parent.addTab('百度','http://www.baidu.com','icon-add')" 如: <a h ...

  3. NPOI 上传Excel功能（二）

    3.上传文件,写入log using DC.BE.Business.SYS; using DC.BE.Entity.ERP; using DC.BE.Entity.SAS; using DC.BE.E ...

  4. THEPYTHONCHALLENG闯关记录

    由于是自己看视频学python,总觉得不写几行代码就什么都没有学到. 找了一个写代码的网站其实只是因为这个看起来好玩. 闯关地址http://www.pythonchallenge.com/index ...

  5. 【C/C++】动态内存分配和链表

    本文对链表以及C/C++中的动态链表做详细诠释. 什么是链表? 链表是一种重要的数据结构,它最大的优点是可以进行动态的存储分配.链表有单向链表,双向链表,循环链表.对于c,这里我们只讨论单向链表. 我 ...

  6. 傻瓜式搭建私人网络硬盘——owncloud安装指南

    百度云这个贱货天天删我资源,我已经忍无可忍了,于是想搭建一个owncloud来放我的里番.使用owncloud不仅安全,而且还可以在线播放,离线下载,功能相当强大. 然而·····网上查了一下,竟然无 ...

  7. OneinStack——PHP多版本共存

    前言 我事先安装的是LNMP环境,PHP版本为7.2,但是现在环境需要一个PHP5.6,所以就准备安装个上版本,顺带写个安装教程,写完后我发现了原来有直接安装的命令!所以后面的内容大家可以忽略了!从配 ...

  8. 洛谷P1916 小书童——蚂蚁大战

    题目背景 小A在你的帮助下,开始“刷题”,他在小书童里发现了一款叫“蚂蚁大战”(又称蛋糕保卫战)的游戏.(你懂得) 题目描述 游戏中会出现n只蚂蚁,分别有a1,a2……an的血量,它们要吃你的蛋糕.当 ...

  9. Django 下载和初识

    Django Django官网下载页面 安装(安装最新LTS版): pip3 install django==1.11.9 创建一个django项目: 下面的命令创建了一个名为"mysite ...

  10. 【XSY2528】道路建设 LCT 可持久化线段树

    题目描述 给你一个\(n\)个点\(m\)条边图,\(q\)个询问,每次问你边权在\([l,r]\)之间的边组成的最小生成树(森林)的边权和.强制在线. \(n,m,q\leq 100000\) 题解 ...