基于jQuery实现瀑布流页面


Posted in jQuery onApril 11, 2017

本文实例为大家分享了jQuery实现瀑布流页面展示的具体代码,供大家参考,具体内容如下

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 相关文章推荐
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
jQuery-App输入框实现实时搜索
Nov 19 jQuery
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 #jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 #jQuery
vue中如何引入jQuery和Bootstrap
Apr 10 #jQuery
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 #jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 #jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 #jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 #jQuery
You might like
php下使用iconv需要注意的问题
2010/11/20 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
Python计算回文数的方法
2015/03/11 Python
python实现简单的计时器功能函数
2015/03/14 Python
玩转python爬虫之cookie使用方法
2016/02/17 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
python学习入门细节知识点
2018/03/29 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
三星英国官网:Samsung英国
2018/09/25 全球购物
英国门把手公司:Door Handle Company
2019/05/12 全球购物
怎样声明子类
2013/07/02 面试题
《颐和园》教学反思
2014/02/26 职场文书
新农村建设标语
2014/06/24 职场文书
岗位说明书标准范本
2014/07/30 职场文书
如何写早恋检讨书
2014/09/10 职场文书
庆六一宣传标语
2014/10/08 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2014年化验员工作总结
2014/11/18 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android
Github 使用python对copilot做些简单使用测试
2022/04/14 Python