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. Codeforces Round #371 (Div. 2)B. Filya and Homework

    题目链接:http://codeforces.com/problemset/problem/714/B 题目大意: 第一行输入一个n,第二行输入n个数,求是否能找出一个数x,使得n个数中的部分数加上x ...

  2. VS插件开发,启用实验室环境

    启用外部程序: C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\devenv.exe 命令行参数 /rootsuffix ...

  3. Python开发【第十八篇】：MySQL（二）

    视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. SELECT * FROM ( SEL ...

  4. 15分钟学会使用Git和远程代码库

    git是个了不起但却复杂的源代码管理系统.它能支持复杂的任务,却因此经常被认为太过复杂而不适用于简单的日常工作.让我们诚实一记吧:Git是复杂的,我们不要装作它不是.但我仍然会试图教会你用(我的)基本 ...

  5. [EWS]在exchange中的标识符

    摘要 最近在用ews的方式开发邮箱服务,包括写邮件,查看某封邮件的详情,回复,全部回复及转发功能.在获取收件箱的时候,关于唯一标识符的问题.也有点困惑,在每个邮件item中,存在一个changeKey ...

  6. 如何清理WindowsXp的临时文件

    软件限制策略中的 "路径规则" 不允许的, 是指在 这个路径中的程序都 不准运行! 这就限制了 : 通常电脑中病毒, 都是通过上网感染病毒的 -> 病毒/恶意软件通过 &qu ...

  7. 完全迁移到red hat来的相关问题解决和配置

    默认从光盘iso镜像安装iso-1 时, yum.repos.d只有 packagekit-media.repo, 要从网上下载一个 CentOS-Base.repo文件放到这里. redhat上下载 ...

  8. Apache ab参数--压力测试

    Apache附带的ab,它非常容易使用,ab可以直接在Web服务器本地发起测试请求.这至关重要,因为我们希望测试的服务器的处理时间,而不包含数据的网络传输时间以及用户PC本地的计算时间. 需要清楚的是 ...

  9. winform 开发心得~

    winform自适应不同分辨率 不同dpi 1.窗体AutoScaleMode属性 使用None 2.自定义控件 AutoScaleMode 使用Inherit 3.所有控件窗体字体使用px为单位

  10. 使用MVVM框架（avalonJS）进行快速开发

    背景 在运营活动开发中,因为工作的重复性很大,同时往往开发时间短,某些情况下也会非常紧急,导致了活动开发时间被大大压缩,同时有些活动逻辑复杂,数据或者状态变更都需要手动渲染,容易出错,正是因为这些问题 ...