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. webpack 使用中的问题

    用gulp-watch代替watch webpack打包体积分析器 集合

  2. 使用BloomFilter布隆过滤器解决缓存击穿、垃圾邮件识别、集合判重

    Bloom Filter是一个占用空间很小.效率很高的随机数据结构,它由一个bit数组和一组Hash算法构成.可用于判断一个元素是否在一个集合中,查询效率很高(1-N,最优能逼近于1). 在很多场景下 ...

  3. Android数据库代码优化(2) - 从SQLite说起

    从SQLite说起 如果没有SQLite的基础,我们只是从Android封装的SQLite API去学习的话,难免思路会受到限制.所以,我们还是需要老老实实从头开始学习SQLite. 当我们有一身的S ...

  4. Django 碎片集合

    命令行创建Django项目 熟记建立django命令:django-admin startproject xx   (start   project) 目录介绍 manage.py 文件是用来管理文件 ...

  5. HTTP 方法：GET与 POST

    什么是 HTTP? 超文本传输协议(HTTP)的设计目的是保证客户机与服务器之间的通信. HTTP 的工作方式是客户机与服务器之间的请求-应答协议. web 浏览器可能是客户端,而计算机上的网络应用程 ...

  6. 洛谷P1979 华容道

    神の契约 题目大意:自己看去... 题解:做了一下午...本蒟蒻立志要写全网最详细的题解.╭(╯^╰)╮ begin.... 暴力70分.可以让空格子到处乱走,只要某个状态的指定格子到目标格子,那么此 ...

  7. UART驱动分析

    在linux用户层上要操作底层串口需要对/dev/ttySxxx操作,这里的ttySx指实际的终端串口. 以下以全志A64为实例,分析UART驱动以及浅谈TTY架构. linux-3.10/drive ...

  8. Yii CDbCriteria类中方法

    $criteria = new CDbCriteria; //select $criteria->select = '*';//默认* $criteria->select = 'id,na ...

  9. Java各种集合容器的总结

    Java容器指的是List,Set,Map这些类.由于翻译的问题,问到集合,Collection这些指的都是它们几个. List ArrayList 随机访问快 LinkedList 插入删除快 这个 ...

  10. 谷歌设置支持webgl

    浏览器报错: could not initialize WebGl 因为谷歌默认不支持WebGl 在浏览器器中输入 about:flags 然后开启:覆盖软件渲染列表,覆盖内置的软件渲染列表,并对不支 ...