后台-插件-广告管理-内容页广告位一(手机)

您现在的位置是:首页 > 编程语言 > JavaScriptJavaScript

基于jQuery实现瀑布流页面

2021-05-19 13:14:33JavaScript人已围观

简介这篇文章主要为大家详细介绍了基于jQuery实现瀑布流页面的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

文章来源:https://www.jb51.net/article/110910.htm

Tags:jquery 瀑布流 

很赞哦! ()

后台-插件-广告管理-内容页广告位二(手机)
后台-插件-广告管理-内容页广告位三(手机)
后台-插件-广告管理-内容页广告位四(手机)

文章评论

留言与评论(共有 0 条评论)
   
验证码:

本栏推荐

站点信息

  • 文章统计49227篇文章
  • 浏览统计3200次浏览
  • 评论统计1个评论
  • 标签管理标签云
  • 统计数据:统计代码
  • 微信公众号:扫描二维码,关注我们