基于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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
jQuery实现电梯导航模块
Dec 22 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
source.php查看源文件
2006/12/09 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
javascript 写类方式之十
2009/07/05 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
jQuery Validate插件实现表单验证
2016/08/19 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
Python3基础之条件与循环控制实例解析
2014/08/13 Python
python调用自定义函数的实例操作
2019/06/26 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
pycharm显示远程图片的实现
2019/11/04 Python
Python单元测试与测试用例简析
2019/11/09 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
python 贪心算法的实现
2020/09/18 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
3.12植树节活动总结2014
2014/03/13 职场文书
遗产继承公证书
2014/04/09 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
本溪水洞导游词
2015/02/11 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
初中英语教学随笔
2015/08/15 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书