html

{% load xx %}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div>

    </div>

    <style>

        .clearfix:after{

            content: '.';

            visibility: hidden;

            height: ;

            clear: both;

            display: block;

        }

        .c1{

            width: 245px;

        }

        .c1 img{

            width: 245px;

            height: 200px;

        }

    </style>

    <div id="container" style="margin: 0 auto;width: 980px;" class="clearfix">

        <div style="width: 245px;float: left">

        </div>

        <div style="width: 245px;float: left">

        </div>

        <div style="width: 245px;float: left">

        </div>

        <div style="width: 245px;float: left">

        </div>

    </div>

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

    <script>

        $(function () {

            $.ajax({

                url: '/student1/',

                type: 'POST',

                dataType: 'json',

                success: function (arg) {

                    //arg = JSON.parse(arg);

                    // arg = JSON.stringify(arg)

                    $.each(arg, function (k,v) {

                        k = k + ;

                        var div = document.createElement('div');

                        div.className = 'c1';

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

                        img.src = "/" + v.student__pic;

                        var p = document.createElement('p');

                        p.innerText =  v.letter_of_thanks;

                        div.appendChild(img);

                        div.appendChild(p);

                        if(k% == ){

                            $('#container').children(':eq(0)').append(div);

                        }else if(k% == ){

                            $('#container').children(':eq(1)').append(div);

                        }else if(k% == ){

                            $('#container').children(':eq(2)').append(div);

                        }else if(k% == ){

                            $('#container').children(':eq(3)').append(div);

                        }else{

                        }

                    })

                }

            })

        })

    </script>

</body>

</html>

html

views

def student1(request):

    if request.method == 'POST':

        detail_list = models.StudentDetail.objects.filter(student__status=).values('letter_of_thanks', "student__name",

                                                                                    "student__salary",

                                                                                    'student__company', 'student__pic')

        detail_list = list(detail_list)

        return HttpResponse(json.dumps(detail_list))

    # student

    # studentDetail

    # detail_list = models.StudentDetail.objects.filter(student__status=).values('letter_of_thanks',"student__name","student__salary",'student__company', 'student__pic')

    return render(request,'student1.html')

views

django的ajax对应前端的瀑布流方法的更多相关文章

  1. Masonry + Ajax 实现无限刷新瀑布流

    效果就如我的个人站yooao.cc,把我实现的思路分享给大家. Masonry渲染页面如果有图片时需要imagesLoaded辅助,不然有可能会造成布局重叠. 一个大体的思路:前端取得最后一篇文章的i ...

  2. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  3. 瀑布流的实现纯CSS实现Jquery实现

    瀑布流的实现 注:本文部分图片自百度下载,如有侵权,联系删图. 首先,选择几张图片布局到HTML内容中.HTML如下所示. <div class="wrapper"> ...

  4. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

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

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

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

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

  7. Django 之瀑布流实现

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

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

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

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

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

随机推荐

  1. 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.

    笔记说明 <CSS3实战手册第3版(影印版)>可以消除Web设计工作的痛苦,并且带给你:HTML--重新入门.如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造.若你是H ...

  2. nginx basic auth 登陆验证模块

    #1. 新建一个pw.pl文件专门用来生成密码 #!/usr/bin/perl use strict; my $pw=$ARGV[0]; print crypt($pw,$pw)."\n&q ...

  3. webstorm 文件历史找回~ 恢复正确状态~

    事情的经过时这样的~  我写好的HTML 我新下载了sublime text3 用这个打开了下 结果都变乱码了~ 大概截个图 都恢复了 就不瞎搞了 webstorm有错误的记录都有真好~ 恢复的具体操 ...

  4. Sql2008R2设置远程链接

    下边的文章是从百度经验里粘过来的.. 经过测试确实有效..留个备份.. 有个小情况在前边说一下.. 在操作前一定要确定自己的sa用户密码是不是一样..不要以为自己知道的是对的就直接略过某些步骤.. 俗 ...

  5. 浅谈JavaScript原型对象与相关设计模式

    引言 本文先从介绍JavaScript中基本的几种设计模式开始,最后引出原型对象,然后对原型对象有一个较全面的介绍. 1.创建对象的几种设计模式 A.工厂模式 我们知道在JavaScript中创建对象 ...

  6. 解决安装VS2013提示“已停止工作”问题

    新安装操作系统(win8.1),手动安装各种驱动,安装VS2013,报错,见下图: 原因:显卡驱动问题. 解决办法:卸载intel显卡驱动这碧池.(系统会自动给你适配合适的)

  7. Linux静态库生成指南

    Linux静态库生成指南   Linux上的静态库,其实是目标文件的归档文件.在Linux上创建静态库的步骤如下: 写源文件,通过 gcc -c xxx.c 生成目标文件. 用 ar 归档目标文件,生 ...

  8. git执行pull命令时，报错

    在图形界面中,执行拉取操作时,出现下面的错误. You asked to pull from the remote 'origin', but did not specifya branch. Bec ...

  9. Ionic 常见问题及解决方案

    前言 Ionic是目前较为流行的Hybird App解决方案,在Ionic开发过程中会遇到很多常见的开发问题,本文尝试对这些问题给出解决方案. 一些常识与技巧 list 有延迟,可以在ion-cont ...

  10. Js设置及获取Cookie的方法

    Login页面设置Cookie: <script type="text/javascript"> if(json.result=="true") { ...