一. 小功能瀑布流的实现

1.完成效果图

2.代码部分

<1>models.py

from django.db import models

# Create your models here.

class image(models.Model):

    name=models.CharField(max_length=32)

    src=models.CharField(max_length=132)

    discribe=models.CharField(max_length=180)

<2>views.py

from django.shortcuts import render,HttpResponse

from water_fall_flow.models import *

import json

# Create your views here.

def imgs(request):

    # img_list = models.Img.objects.all()

    return render(request,'images.html')

def get_img(request):

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

     last_position_id=int(nid)+7

     position_id=str(last_position_id)

     print('>>>>>>position_id',position_id)

     ret = {'status': True, 'data': None}

     image_list=image.objects.filter(id__gt=nid,id__lt=position_id).values('id','src','discribe')

     image_list=list(image_list)

     print('image_list:',image_list)

     ret['data']=image_list

     print('>>>>>>>ret:',ret)

     return HttpResponse(json.dumps(ret))

<3>image.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .container{

            width: 1000px;

            margin: 0 auto;

        }

        .item{

            width: 25%;

            float: left;

        }

        .item img{

             width: 100%;

        }

    </style>

</head>

<body>

    <div>图片</div>

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

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

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

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

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

    </div>

<script src="/static/jquery-3.1.1.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_img.html',

                type: 'GET',

                data: {nid: that.NID},

                dataType: 'JSON',

                success: function (arg) {

                    var img_list = arg.data;

                    $.each(img_list, function (key, value) {

                        var eq_value = (key + that.LASTPOSITION + 1) % 4;

                        console.log(eq_value);

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

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

                        $('#images').children().eq(eq_value).append(tag);

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

                            that.LASTPOSITION = eq_value;

                            //that.NID = value.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之瀑布流的更多相关文章

  1. Django 之瀑布流实现

    需求分析 现在是 "图片为王"的时代,在浏览一些网站时,经常会看到类似于这种满屏都是图片.图片大小不一,却按空间排列,就这是瀑布流布局. 以瀑布流形式布局,从数据库中取出图片 每次 ...

  2. Django实现瀑布流，组合搜索

    Django中组合搜索功能 需求分析 很多电商网站中有组合搜索的功能,所谓组合搜索就是网页中组合多个条件,对数据库中进行查询,并且将结果显示在页面中,看个例子吧: 注意红框中的标识,我们可以根据URL ...

  3. django实现瀑布流、组合搜索、阶梯评论、验证码

    django实现图片瀑布流布局 我们在一些图片网站上经常会看到,满屏都是图片,而且图片都大小不一,却可以按空间排列.默认一个div是占用一行,当想把div里的图片并排显示的时候,只能使用float属性 ...

  4. JavaScript中作用域回顾（避免使用全局变量）（瀑布流的实现）（scroll事件）以及Django自定义模板函数回顾

    页面显示照片样式为瀑布流: 上面的div个数可以按照自己安排进行划分.img的分布可以使用模板标签以及自定义模板函数进行排布: 自定义模板函数实现可以看,最后几列:python---django中模板 ...

  5. Django模板语言中的自定义方法filter过滤器实现web网页的瀑布流

    模板语言自定义方法介绍 自定义方法注意事项 Django中有simple_tag 和 filter 两种自定义方法,之前也提到过,需要注意的是 扩展目录名称必须是templatetags templa ...

  6. 【Python之路】特别篇--Django瀑布流实现

    瀑布流 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinteres ...

  7. 轮播组件/瀑布流/组合搜索/KindEditor插件

    一.企业官网 ### 瀑布流 ​ Models.Student.objects.all() #获取所有学员信息 ​ 通过div进行循环图片和字幕 ​ 1.以template模板方法实现瀑布流以列为单位 ...

  8. jquery瀑布流的制作

    首先,还是来看一下炫酷的页面: 今天就边做边说了: 一.准备工作 新建css,js,img文件夹存放相应文件,并在demo.html文件中引入外部文件(注意要把jquery文件引入),这里就不过多描述 ...

  9. js瀑布流 原理实现揭秘 javascript 原生实现

    web,js瀑布流揭秘 瀑布流再很久之前流行,可能如我一样入行晚的 ,可能就没有机会去使用.但是这个技术终究是个挺炫酷的东西,花了一个上午来研究,用原生js实现了一个,下面会附上源码,供大家解读. 说 ...

随机推荐

  1. 【函数式】Monads模式初探——Endofunctor

    自函子 自函子(Endofunctor)是一个将范畴映射到自身的函子(A functor that maps a category to itself). 函子是将一个范畴转换到另一个范畴.所以自函子 ...

  2. 当使用servlet输出json时，浏览器端jquery的ajax遇到parse error的问题

    在使用jquery的ajax进行请求发送并由服务端的servlet返回json格式的数据内容时,假设输出内容没有正确设置,会遇到client浏览器报告parse error的问题.这个问题的解决仅仅须 ...

  3. SQL Server数据库 bcp导出备份文件应用

    /**  * 授权  */ EXEC sp_configure 'show advanced options',1; go reconfigure; go exec sp_configure 'xp_ ...

  4. GNU TeXmacs 1.99.8 发布，所见即所得科学编辑器（看看老实的GUI）

    GNU TeXmacs 1.99.8 已发布,这是一个支持各种数学公式的所见即所得编辑器,可以用来编辑文本.图形.数学.交互内容,它的界面非常友好,并且内置高质量的排版引擎. 更新内容: bug 修复 ...

  5. bzoj5277: [Usaco2018 Open]Out of Sorts

    被tkj大爷艹爆了5555整套模拟赛都是神仙思路题 那么这题题解 还有一个神仙做法,zory巨神在考场上找规律AC,自己都不会证..我证明了一下(然而这货还是不认可自己的做法) 按照分割点的思路,我们 ...

  6. PHP 比 Java 的开发效率高在哪？

    PHP 比 Java 的开发效率高在哪? 现在很多互联网应用都是php开发的,在很多人的观念里已经把php与java分到了两个开发领域,php是互联网,java是企业应用. 都说php的开发效率高,更 ...

  7. Tool-杂项-建模：犀牛（3D造型软件）

    ylbtech-Tool-杂项-建模:犀牛(3D造型软件) 犀牛(Rhino)是美国Robert McNeel & Assoc.开发的PC上强大的专业3D造型软件,它可以广泛地应用于三维动画制 ...

  8. 代理模式(Proxy)C++实现

    代理模式 尽管Decorator的实现部分与代理相似,但Decorator的目的不一样.Decorator为对象添加一个或多个功能,而代理则控制对对象的访问. 意图: 为其他对象提供一种代理以控制对这 ...

  9. （整）deepin下mysql的安装与部分错误解决办法

    deepin(深度)是国产Linux系统,程序员肯定要了解Linux系统啦,但是在程序安装上可能会有些不习惯,现在让我们来看看mysql在deepin上的安装过程. 1.傻瓜式命令行安装 这也是Lin ...

  10. 用LyX写中文幻灯片

    虽然在虚拟机装了texlive以备使用,但是在不动CTeX的情况下,是否能使用LyX写中文幻灯片呢.网上只是寥寥几篇大神们在Linux用LyX的博文. 最近把论文交完写幻灯片,于是也把这个想法尝试了一 ...