python 瀑布流作业

刚访问页面只显示8张图片，滚动条拖到底部后再通过ajax更新数据

models.py，数据库类

class ImgInfo(models.Model):
    state_choice = (
        (0,'展示'),
        (1,'不展示'),
    )

    state = models.SmallIntegerField(choices=state_choice,default=0,verbose_name='是否展示')
    title = models.CharField(max_length=32,verbose_name='标题')
    message = models.CharField(max_length=48,verbose_name='简介')
    img = models.ImageField(upload_to='./static/img/meinv/',verbose_name='图片地址')

    class Meta:
        db_table = 'imginfo'
        verbose_name_plural = '图片库'

    def __str__(self):
        return self.title

models.py

urls.py ，路由

re_path('^img.html$', views.img),
re_path('^get_img.html$', views.get_img),

views.py 逻辑处理

def img(request):
    logo = models.Logo.objects.all().first()
    menu_nav = models.MenuNav.objects.all().order_by('-width')
    return render(request,'img.html',{
        'menu_nav': menu_nav,
        'Logo': logo,
    })

def get_img(request):
    import json
    mid = request.GET.get('mid')
    img_list = models.ImgInfo.objects.filter(id__gt=mid).values('id','img','title')[:8]
    result = {
        'state': True,
        'data': None
    }
    if img_list:
        result['data'] = list(img_list)
    else:
        result['state'] = False

    return  HttpResponse(json.dumps(result))

img.html 页面

<style>
.img_item{
    width: 25%;
    float: left;
}
.img_item img {
    width: 100%;
    padding-top: 10px;
    padding-left: 10px;

}
</style>   

<div style="width: 100%" id="item_conten">
        <div class="img_item">

        </div>
        <div class="img_item"></div>
        <div class="img_item"></div>
        <div class="img_item"></div>
   </div>
    <script>
        $(function () {
            mid = 0 ;   //全局变量，用来记录页面上显示的图片数量
            is_data = true //全局变量，用来确认是否再继续向后端获取数据
            img_init()
            $(document).scroll(function() {
           var scroH = $(document).scrollTop();  //滚动高度
                var viewH = $(window).height();  //可见高度
                var contentH = $(document).height();  //内容高度
                    if (scroH >= contentH - viewH) {
                        if(is_data){
                            img_init()
                        }

                    }

            });

        })

         

        function  img_init() {
            $.ajax({
                url:'get_img.html',
                type:'GET',
                dataType:'JSON',
                data:{'mid':mid},
                success:function (arg) {
                    if(arg['state']){
                        var data = arg['data']
                        $.each(data,function (index,v) {
                            var i = index % 4;
                            var ele = $('<img>');
                            ele.attr('src',v['img']);
                            ele.attr('mid',v['id']);
                            var title = $('<p>');
                            title.attr('mid',v['id']);
                            title.css('text-align','center');
                            title.html(v['title']);
                            $('#item_conten').children().eq(i).append(ele);
                            $('#item_conten').children().eq(i).append(title);

                        });
                         mid += 8;
                    }else{
                        is_data = false
                    }

                }
            })
        }
    </script>

猜你喜欢