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. 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 ...

  2. Kali Linux破解wifi密码(WEP)

    WEP是无线路由器最初广泛使用的一种加密方式,这种加密方式非常容易被破解. 目前很少有人使用wep加密方式,但是还是会有. 建议:使用WPA/WPA2做为加密方式. 抓包和"破解wpa/wp ...

  3. 高级C/C++编译技术之读书笔记（三）之动态库设计

    最近有幸阅读了<高级C/C++编译技术>深受启发,该书深入浅出地讲解了构建过程(编译.链接)中的各种细节,从多个角度展示了程序与库文件或代码的集成方法,提出了面向代码复用和系统集成的软件架 ...

  4. C# 数组、ArrayList和List三者的区别

    在C#中数组,ArrayList,List都能够存储一组对象,那么这三者到底有什么样的区别呢. 数组 数组在C#中最早出现的.在内存中是连续存储的,所以它的索引速度非常快,而且赋值与修改元素也很简单. ...

  5. matlab中的开方sqrt用牛顿迭代法实现的代码

    function kaifang = KAIFANG(a)g0=a/2;g1=(g0+a./g0)/2;for i=0 : 299g0=g1;g1=(g0+a./g0)/2;endkaifang = ...

  6. 简述MVC模式

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  7. JAVA内置注解 基本注解

    温故而知新,可以为师矣! 每天复习,或者学习一点小东西,也能水滴石穿! 今天复习5个JAVA内置基本注解(贴代码胜过千言万语): package com.lf.test; import java.ut ...

  8. FastAdmin 一键 CRUD 生成时方法不存在的问题分析

    FastAdmin 一键 CRUD 生成时方法不存在的问题分析 有群友反馈 使用 一键 CRUD 生成时不成功. 我试了以下命令 php think crud -t test -u 1 是成功的. 再 ...

  9. 用css来写一个背景图片的切换

    代码如下: <!DOCTYPE HTML> <htmllang="en-US"> <head> <meta charset="U ...

  10. Ubuntu 14.04报“leaking memory”错误

    在做一些实验的时候,临时配置了笔记本网卡eth0的IP地址,结果出现了以下错误, $ sudo ifconfig eth0 192.168.2.100/24 no talloc stackframe  ...