瀑布流展現圖片

時間 2019-11-11

原文原文鏈接

瀑布流

用來圖片展現，而且頁面往下滾動自動刷新html

views.py

def img(request):
    return render(request,'img.html')

def get_img(request):
    nid = request.GET.get('nid')
    img_obj = models.Images.objects.filter(id__gt=nid).values('id','src','title')
    img_list = list(img_obj)
    ret = {
        'status':True,
        'data':img_list
    }
    return JsonResponse(ret)

img.html

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

        .item {
            width: 25%;
            display: inline-block;
            float: left;
        }

        .item img {
            width: 100%;

        }
    </style>
</head>
<body>
<div class="m">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        var obj = new ScollImg();
        obj.initImg();
        obj.scollEvent()
    });

    function ScollImg() {
        this.nid = 0;
        this.lastPostion = 3;
        this.initImg = function () {
            var that = this;
            $.ajax({
                url: '/get_img.html/',
                type: 'GET',
                dataType: 'JSON',
                data: {nid: that.nid},
                success: function (arg) {
                    var img_list = arg.data;
                    $.each(img_list, function (index, v) {
                        var eqv = (index + that.lastPostion + 1) % 4;
                        var tag = document.createElement('img')
                        tag.src = '/' + v.src;
                        $('.m').children().eq(eqv).append(tag);
                        // 當循環到最後一個圖片時，將圖片ID賦值給NID
                        if (index + 1 == img_list.length) {
                            that.nid = v.id;
                            that.lastPostion = eqv;
                        }
                    })
                }
            })

        };
        // 當滾動到達最底部時，執行initImg();
        this.scollEvent = function () {
            var that = this
            $(window).scroll(function () {
                // 何時到達最底部
                // 文檔高度
                var docHeight = $(document).height();
                // 窗口高度
                var winHeight = $(window).height();
                // 滾動條高度
                var scrollTop = $(window).scrollTop();
                if (winHeight + scrollTop == docHeight) {
                    that.initImg()
                }
            })
        }
    }

</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。