2018-10-10-Python全栈开发-day65-瀑布流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .w {
            width: 1000px;
            margin: 0 auto;
        }

        .item {
            width: 25%;
            float: left;
        }

        .item img {
            width: 100%;
        }
    </style>
</head>
<body>
<div>this is pic</div>
<div class="w" id="imgs">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

<script src="/static/jquery-1.12.4.js"></script>
<script>

    $(function () {
        addimg();
        stroll1()
    });

    
    var fin_num=3;
    function addimg() {
        console.log('1');
        $.ajax(
            {
                url: '/index1',
                type: 'GET',
                data: {'nid': 100},
                dataType: 'JSON',
                success: function (arg) {
                    var dict = arg.data;
                    console.log('2', dict);
                    $.each(dict, function (index, v) {
                        var num = (index +1 +fin_num) % 4;
                        console.log(num);
                        var tag = document.createElement('img');
                        tag.src = '/' + v.src;
                        $('#imgs').children().eq(num).append(tag);
                        if(index+1== dict.length){
                            fin_num=num
                        }
                    })
                }
            })


    }
    function stroll1() {
        $(window).scroll(function () {
            var wendang = $(document).height();
            var hualun = $(window).scrollTop();
            var chuangkou = $(window).height();
            if (chuangkou + hualun == wendang) {
                addimg()
            }
        })
    }


</script>
</body>
</html>

html

from django.shortcuts import render,HttpResponse
from django.http import JsonResponse

# Create your views here.
from app01 import models
import json
def index(request):
    return render(request, 'index.html')
def index1(request):
    nid=request.GET.get('nid')
    print(nid)
    imgs=models.Img.objects.filter(id__lt=nid).values('id','src','title')#jquery对象
    imgs=list(imgs)
    print(imgs)
    ret = {
        'status': True,
        'data': imgs
    }
    return JsonResponse(ret,safe=False)

views

2018-10-10-Python全栈开发-day65-瀑布流

猜你喜欢