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. 使用Metasploit收集邮箱信息

    Metasploit提供了很多辅助的模块,非常实用.今天介绍一个叫search_email_collector的模块,它的功能是查找搜索引擎(google.bing.yahoo),收集和某个域名有关的 ...

  2. 【转载】VC获取MAC地址的4种方法

    From:http://blog.csdn.net/pdfmaker/article/details/465748 有需求才有创造,有了问题才会想着去解决,那么我这里的获取MAC地址的第4种方法也是在 ...

  3. squid http_access中的逻辑关系

    http_access通过acl实现访问控制,方法 acl A acltype argument acl B acltype argument 逻辑关系:或 http_access allow|den ...

  4. 【解题报告】[动态规划]RQNOJ PID2 / 开心的金明

    原题地址:http://www.rqnoj.cn/problem/2 解题思路:背包问题. 状态转移方程:DP[i][j]=max(DP[i-v[j]][j-1]+p[j]*v[j],DP[i][j- ...

  5. SSM框架(1)

    Spring MVC Framework有这样一些特点: 它是基于组件技术的.全部的应用对象,无论控制器和视图,还是业务对象之类的都是java组件.并且和Spring提供的其他基础结构紧密集成. 不依 ...

  6. 在JVM中，新生代和旧生代有何区别？GC的回收方式有几种？server和client有和区别？

    在JVM中,新生代和旧生代有何区别?GC的回收方式有几种?server和client有和区别? 2014-04-12 12:09 7226人阅读 评论(0) 收藏 举报  分类: J2SE(5)  一 ...

  7. 51nod 1298 圆与三角形

    给出圆的圆心和半径,以及三角形的三个顶点,问圆同三角形是否相交.相交输出"Yes",否则输出"No".(三角形的面积大于0).       输入 第1行:一个数 ...

  8. Java JDK安装和配置(Windows)

    安装和配置JDK JDK中自带了JRE,不需要单独下载, 打开JDK安装, 选择安装目录,下一步,装完JDK,会问是否安装JRE,选下一步, 最后还会问是否安装Java FX, 装完后就全部完成了JD ...

  9. win键盘映射成mac键盘

    在win7系统下安装了mac虚拟机,mac的快捷键与win的键盘不一样,所以ctrl+c,ctrl+v都用不了,于是找方法映射. 搜索到 keyremap4macbook,,进到官网Karabiner ...

  10. WCF OpenTimeout, CloseTimeout, SendTimeout, ReceiveTimeout

    1.OpenTimeout 客户端与服务端建立连接时,如果超过指定时间都还没完成,就引发TimeoutException. 在TCP通讯中,服务器必须首先准备好侦听端口并在该端口上侦听(Listen) ...