views.py

 from django.shortcuts import render,HttpResponse

 from app01 import models

 import json

 # Create your views here.

 def index(req):

     if req.method == 'POST':

         dic = models.Upload.objects.filter(status=1).values('img1','name','info')

         dic = list(dic)

         dic = json.dumps(dic)

         print(dic)

         return HttpResponse(dic)

     return render(req, 'index.html')

url.py

 from django.conf.urls import url

 from django.contrib import admin

 from app01 import views

 urlpatterns = [

     url(r'^admin/', admin.site.urls),

     url(r'^index/', views.index),

 ]

index.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .clearfix:after{

             content: '.';

             visibility: hidden;

             height: 0;

             clear: both;

             display: block;

         }

         img{

             width: 245px;

             height: 200px;

         }

     </style>

 </head>

 <body>

     <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:'/index/',

                 type:'POST',

                 dataType:'json',

                 success:function (arg) {

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

                         console.log(k,v);

                         k = k + 1;

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

                         div.className = 'c1';

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

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

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

                         p.innerText = v.info;

                         div.appendChild(img);

                         div.appendChild(p);

                         if (k % 4 == 1) {

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

                         } else if (k % 4 == 2) {

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

                         } else if (k % 4 == 3) {

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

                         } else if (k % 4 == 0) {

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

                         } else {

                         }

                     })

                  }

             })

         })

     </script>

 </body>

 </html>

JQuery实现瀑布流页面的更多相关文章

  1. 用jQuery实现瀑布流效果学习笔记

    jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...

  2. 用JavaScript和jQuery实现瀑布流

    ▓▓▓▓▓▓ 大致介绍 在慕课网上学习了用原生js和jQuery实现瀑布流,在这里做个笔记 ▓▓▓▓▓▓ 用JavaScript实现 基本结构: <div id="main" ...

  3. 【前端】用jQuery实现瀑布流效果

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

  4. 网友微笑分享原创Jquery实现瀑布流特效

    首先非常感谢网友微笑的无私分享,此Jquery特效是一款非常流行和实用的瀑布流布局,核心代码只有几十行,是我见过代码量最少的瀑布流布局,非常适合网友们学习哦,希望大家好好看一下这个Jquery特效的原 ...

  5. jQuery实现瀑布流

    瀑布流布局多用于加载图片,或者图片配上文字.视觉表现为参差不齐的多栏布局.随着页面滚动条向下滚动,还会不断加载数据块并附加至当前尾部.本文就来利用jQuery实现一个图片瀑布流的效果. 1.布局. 首 ...

  6. jQuery实现瀑布流(pc、移动通用)

    使用 jQuery 的 Masonry 插件来实现这种页面形式 1,分别下载 jQuery 与 Masonry ,然后把他们都加载到页面中使用. 加载代码: <script src=" ...

  7. 自定义基于jquery竖向瀑布流插件

    公司新项目做了一个关于图片的板块,网上找了一些瀑布流插件都不是很适合自己,于是就自己造轮子写一个,并封装成插件github 于是就想分享一下,主要是为了更好的学习与记忆. 如果大家进来了,希望能给我g ...

  8. jquery.masonry瀑布流插件的4个使用步骤

    1.分别加载jquery插件与jquery.masonry插件两个文件 下载jquery插件:http://jquery.com也可以引用google的cdn外部jquery核心库JS文件下载jque ...

  9. 用jquery实现瀑布流案例

    一.瀑布流是我们常见的案例,这里主要讲述,用jquery的方式实现瀑布流的功能! 引言:我们经常见到很多网站的瀑布流功能,如淘宝.京东这些商品等等.. 实现它我们首先考虑几个问题:1.获取到数据   ...

随机推荐

  1. 边缘检测︱基于 HED网络TensorFlow 和 OpenCV 实现图片边缘检测

    本文摘录自<手机端运行卷积神经网络的一次实践 – 基于 TensorFlow 和 OpenCV 实现文档检测功能> 只截取感兴趣 的片段. . 一.边缘检测 1.传统边缘检测 Google ...

  2. docker中宿主机与容器（container）互相拷贝传递文件的方法

    转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/71425077 本文出自[我是干勾鱼的博客] 前面讲解过如何进入.退出docker ...

  3. I.MX6 AR8031 寄存器操作

    /*************************************************************************** * I.MX6 AR8031 寄存器操作 * ...

  4. 老师木发的makefile与autotools

    makefile http://scc.qibebt.cas.cn/docs/linux/base/%B8%FA%CE%D2%D2%BB%C6%F0%D0%B4Makefile-%B3%C2%F0%A ...

  5. WC2019 T1 数树

    WC2019 T1 数树 传送门(https://loj.ac/problem/2983) Question 0 对于给定的两棵树,设记两颗树 \(A,B\) 的重边数量为 \(R(A,B)\),那么 ...

  6. initWithImage和imageWithContentsOfFile的区别

    UIImageView *imageView = [[UIImageView alloc] initWithImage:         [UIImage imageNamed:@"icon ...

  7. 51nod 1089 最长回文子串 V2（Manacher算法）

    回文串是指aba.abba.cccbccc.aaaa这种左右对称的字符串. 输入一个字符串Str,输出Str里最长回文子串的长度. 收起   输入 输入Str(Str的长度 <= 100000) ...

  8. python函数返回值

    2016-08-09  15:01:38 python函数返回值使用return语句,可以返回任意类型的数.如果return语句执行,它之后的所有语句都不再执行. def func(x,y): pri ...

  9. js中typeof用法详细介绍

    typeof 运算符把类型信息当作字符串返回,包括有大家常有变量类型.   typeof 运算符把类型信息当作字符串返回.typeof 返回值有六种可能: "number," &q ...

  10. vba打开excel文件遍历sheet的名字和指定单元格的值

    今天项目上有个应用,获取指定Excel文件下的所有sheet的名称以及当前sheet中指定单元格的值,并把他们写到固定的sheet中去,看了下,文件比较多,而且每个文件sheet的个数比较多,也不一样 ...