waterfull效果

最新推荐文章于 2024-05-01 15:53:39 发布

raylu666

最新推荐文章于 2024-05-01 15:53:39 发布

阅读量3.4k

点赞数

分类专栏： django Python

本文链接：https://blog.csdn.net/java_raylu/article/details/84867133

版权

Python 同时被 2 个专栏收录

60 篇文章 2 订阅

订阅专栏

django

27 篇文章 1 订阅

订阅专栏

views:

def pubuliu(request):
    return render(request,"瀑布流.html")


def loadimgs(request):
    col = request.GET.get("col")
    col = int(col)
    objs = models.Imgs.objects.values("img_path","title","content")[col:col+8]
    objs = list(objs)
    print(col)
    ret={
        "status":"OK,这是一个测试",
        "data":objs
    }
   # print(objs)
    return HttpResponse(json.dumps(ret))

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <style>
        #w{
            width: 100%;
        }
        .cols{
            width: 25%;
            float: left;
        }
        .cols img{
            width: 100%;
        }
    </style>
</head>
<body>
<div id="w">
    <div class="cols">   123
    </div>
    <div class="cols">      sasdf
    </div>
    <div class="cols">      we
    </div>
    <div class="cols">       ad
    </div>

</div>

</body>
    <script src="/static/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            loadimg();
            reloadimg();
        })
        positionNow = 0;
        function loadimg(){
            tempcol = 0;
            $.ajax({
                url:"/loadimgs/",
                data:{"col":positionNow},
                type:"GET",
                dataType:"JSON",
                success:function(args){
                    console.log(args.status);
                    positionNow+=8;
                    $.each(args.data,function (i,v) {
                        imgs = document.createElement("img");
                        imgs.src="/"+v["img_path"];
                        tempcol=i%4;
                        $("#w").children().eq(tempcol).append(imgs);
                        console.log(i,v);
                    })
                    console.log($("#w").children().eq(0).html())
                }
            })
        }
        function reloadimg() {
            $(window).scroll(function(){
                console.log(123)
                //窗口高度 $(window).scrollTop()
                //滑轮剩余高度 $(document).height()
                //文本总高度 $(window).scrollTop()
                if($(document).height()==$(window).height()+$(window).scrollTop()){
                    loadimg();
                }
            })
        }
    </script>
</html>

models.Imgs:

class Imgs(models.Model):
    img_path = models.ImageField(upload_to="static/imgs")
    title = models.CharField(max_length=128)
    content = models.CharField(max_length=128)

django mysql数据库配置

settings.py:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'pubuliu',
        'USER':'root',
        'PASSWORD':'123',
        'HOST':'127.0.0.1',
        'PORT':'3306',
    }
}

raylu666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
waterfull效果

views:def pubuliu(request): return render(request,"瀑布流.html")def loadimgs(request): col = request.GET.get("col") col = int(col) objs = models.Imgs.objects.values("img_path","titl...
复制链接

扫一扫

专栏目录