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. 如何在PostgreSQL中建只读账号

    转: 如何在PostgreSQL中建只读账号 Posted on 2014-01-21 22:00:15 by osdba 在PostgreSQL中并没有CREATE TABLE权限名称,这是与其它数 ...

  2. JavaScript 中 this：

    在绑定事件时,this指定的是被绑定的那个html元素,比如: 结果: press里的this指的就是canvas.

  3. js实现显示系统时间的表盘

    核心: 1,document.styleSheets 修改css里的keyframes属性值 2,表针角度的计算 最终显示效果: <!DOCTYPE html> <html> ...

  4. Developing IOS Application with Delphi Xe4 .only for play the toy?

    Recently, i am working on r&d of some keypoint of some app idea. if all thing ok, i will continu ...

  5. 2017年终巨献阿里、腾讯最新Java程序员面试题，准备好进BAT了吗

    Java基础 进程和线程的区别: Java的并发.多线程.线程模型: 什么是线程池,如何使用? 数据一致性如何保证:Synchronized关键字,类锁,方法锁,重入锁: Java中实现多态的机制是什 ...

  6. VC++ windows开机自启动设置

    设置开机启动 很多软件要求软件能够在开机时自启动,下面讲讲如何设置开机自启动. Windows设置程序的开机启动的方法有很多,这里只讲其中的一种,该方法同时适用于32位和64位的操作系统,只需将需要开 ...

  7. Doxygen详细介绍

    1 序言 为代码写注释一直是大多数程序员有些困扰的事情.当前程序员都能接受为了程序的可维护性.可读性编码的同时写注释的说法,但对哪些地方应该写注释,注释如何写,写多少等这些问题,很多程序员仍然没有答案 ...

  8. Linux性能评测工具之一：gprof篇介绍

    转:http://blog.csdn.net/stanjiang2010/article/details/5655143 这些天自己试着对项目作一些压力测试和性能优化,也对用过的测试工具作一些总结,并 ...

  9. 3 循环语句——《Swift3.0从入门到出家》

    3 循环语句 当一段代码被多次重复利用的使用我们就使用循环 swift提供了三种形式的循环语句 1.while 循环 2.repeat — while 循环 3.for — in 循环 while 循 ...

  10. ThinkPHP5.1开启调试和错误提示

    app/config,php中找到 show_error_msg=false  改为True; 再将 'app_debug' => false 改为True;