基于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操作之效果详解
May 19 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
jQuery实现购物车全功能
Jan 11 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 和 MySQL 基础教程(一)
2006/10/09 PHP
推荐一篇入门级的Class文章
2007/03/19 PHP
基于php权限分配的实现代码
2013/04/28 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
PHP 8新特性简介
2020/08/18 PHP
5款Javascript颜色选择器
2009/10/25 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
python通过索引遍历列表的方法
2015/05/04 Python
python daemon守护进程实现
2016/08/27 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
Python telnet登陆功能实现代码
2020/04/16 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
考试不及格检讨书
2014/01/09 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
三方合作协议书范本
2014/04/18 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
通知函的格式
2015/04/27 职场文书
党员进社区活动总结
2015/05/07 职场文书
高中同学会致辞
2015/08/01 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书