瀑布流的简单实现 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container{
            width: 100%;
        }
        #container .item{
            width: 25%;
            float: left;
        }
        .item img{
            width: 100%;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="item"></div>             #核心设计：4个子div,从数据库取到的图片按一定的顺序依次放到每个div 里面
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<script src="/static/plugin/js/jquery-3.1.1.js"></script>
<script>
    $(function () {
        initImg();
        scrollEvent();
    });
    var NID=0;
    var LastPosition=3;  #使第一张图片放到子div 0
    function initImg() {
        $.ajax({
            url:'/get_img.html',
            type:"GET",
            dataType:"JSON",
            data:{'NID':NID},
            success:function (arg) {
                if (arg.status){
                    var img_list=arg.data; #取到图片存储地址
                    $.each(img_list,function (index,value) {        #循环放到指定的位置
                        var eqv=(index+LastPosition+1)%4;  #值为0，1，2，3，0，1，2，3.。
                        var tag=document.createElement('img');   
                        tag.src=value.pic_path;
                        $("#container").children().eq(eqv).append(tag);  #加到第一个子div
                        if((index+1) == img_list.length){  #最后那张图片的index
                            {#NID=value.nid;#} #生产情况时使用
                            NID=0;
                            LastPosition=eqv;     #记录最后放到哪个子div 了
                        }
                    })
                }
            }

        })
    }
    function scrollEvent() {
        $(window).scroll(function () {
            var body_height=$(document).height();
            var win_height=$(window).height();
            var scroll_height=$(window).scrollTop();
            if (win_height + scroll_height +1 >= body_height){               #滚动到最底部，再取一次，如此反复
                initImg();
            }
        })
    }

</script>
</body>
</html>
def GetImg(request):
    result={"status":False,'data':None}
    if request.method == 'GET':
        NID=request.GET.get("NID")
        img_list=models.PubuImage.objects.filter(nid__gt=NID).values('nid','pic_path','pic_name')
        img_list=list(img_list)
        result['status']=True
        result['data']=img_list
        return JsonResponse(result)

def Imags(request):
    return render(request,'get_img.html')    #放回get_img.html ,在get_img 里面执行ajax


[05/Dec/2018 14:51:25] "GET /get_img.html?NID=0 HTTP/1.1" 200 460

 

posted @ 2018-12-05 15:06  986428528  阅读(95)  评论(0)    收藏  举报