基于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插件之validation插件
Mar 29 jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 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 at(@)符号的用法简介
2009/07/11 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
使用python生成目录树
2018/03/29 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
python实现飞船大战
2020/04/24 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
python的pip有什么用
2020/06/17 Python
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
建筑专业毕业生推荐信
2013/11/21 职场文书
大学生个人自我鉴定
2013/12/03 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
服务理念口号
2014/06/11 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
Redis 限流器
2022/05/15 Redis
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server