Django之瀑布流

一. 小功能瀑布流的实现

1.完成效果图

2.代码部分

<1>models.py

from django.db import models

# Create your models here.
class image(models.Model):
    name=models.CharField(max_length=32)
    src=models.CharField(max_length=132)
    discribe=models.CharField(max_length=180)

View Code

<2>views.py

from django.shortcuts import render,HttpResponse
from water_fall_flow.models import *
import json

# Create your views here.

def imgs(request):
    # img_list = models.Img.objects.all()
    return render(request,'images.html')

def get_img(request):
     nid = request.GET.get('nid')
     last_position_id=int(nid)+7
     position_id=str(last_position_id)
     print('>>>>>>position_id',position_id)

     ret = {'status': True, 'data': None}
     image_list=image.objects.filter(id__gt=nid,id__lt=position_id).values('id','src','discribe')
     image_list=list(image_list)
     print('image_list:',image_list)
     ret['data']=image_list
     print('>>>>>>>ret:',ret)
     return HttpResponse(json.dumps(ret))

View Code

<3>image.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            width: 1000px;
            margin: 0 auto;
        }
        .item{
            width: 25%;
            float: left;
        }
        .item img{
             width: 100%;
        }
    </style>
</head>
<body>
    <div>图片</div>
    <div class="container" id="images">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    </div>
<script src="/static/jquery-3.1.1.js"></script>

<script>
    $(function () {
        var obj = new ScrollImg();
        obj.fetchImg();
        obj.scrollEvent();

    });
    function ScrollImg() {
        this.NID = 0;
        this.LASTPOSITION = 3;
        this.fetchImg = function () {
            var that = this;
            $.ajax({
                url: '/get_img.html',
                type: 'GET',
                data: {nid: that.NID},
                dataType: 'JSON',
                success: function (arg) {
                    var img_list = arg.data;
                    $.each(img_list, function (key, value) {
                        var eq_value = (key + that.LASTPOSITION + 1) % 4;
                        console.log(eq_value);
                        var tag = document.createElement('img');
                        tag.src = '/' + value.src;
                        $('#images').children().eq(eq_value).append(tag);
                        if (key + 1 == img_list.length) {
                            that.LASTPOSITION = eq_value;
                            //that.NID = value.id;
                        }
                    })

                }

            })
        };
        this.scrollEvent = function () {
            var that = this;
            $(window).scroll(function () {
                var scrollTop = $(window).scrollTop();
                var winHeight = $(window).height();
                var docHeight = $(document).height();
                if (scrollTop + winHeight == docHeight) {
                    that.fetchImg();
                }
            })
        }

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

View Code

>>>>>>>待续

一. 小功能瀑布流的实现

1.完成效果图

2.代码部分

猜你喜欢