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 = {
        'status': True,
        'data': None
    }
    if img_list:
        result['data'] = list(img_list)
    else:
        result['status'] = False

    return  HttpResponse(json.dumps(result))

img.html 页面

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6 </head>
  7 <style>
  8     body{
  9         margin: auto;
 10     }
 11     .outer {
 12         width: 1000px;
 13         margin-left: 200px;
 14     }
 15     .img_item{
 16         width: 25%;
 17         float: left;
 18     }
 19     .img_item img {
 20         width: 100%;
 21         margin-left: 10px;
 22         margin-top: 10px;
 23     }
 24     .img_item p{
 25         display: inline-block;
 26         width: 100%;
 27         text-align: center;
 28     }
 29 </style>
 30 <body>
 31 
 32 <div class="outer">
 33     <div class="img_item"></div>
 34     <div class="img_item"></div>
 35     <div class="img_item"></div>
 36     <div class="img_item"></div>
 37 </div>
 38 
 39 <script src="/static/js/jquery-3.1.1.js"></script>
 40 <script>
 41     $(function () {
 42         var obj = new ImgInfo();
 43         obj.img_init();
 44         obj.scroll_func();
 45     })
 46 
 47     function ImgInfo() {
 48         this.nid = 0; //用来记录页面上显示的图片数量
 49         this.last_position = -1; //记录最后一次div位置
 50         this.is_end = false; //来确认后端是否已经没有数据
 51         this.img_init = function () {
 52             that = this
 53             $.ajax({
 54             url:'get_img.html',
 55             type:'GET',
 56             dataType:'JSON',
 57             data:{'nid':that.nid},
 58             success:function (arg) {
 59                 if (arg.status){
 60                     var data = arg['data'];
 61                     $.each(data,function (index,v) {
 62 
 63                         var i = (index+that.last_position+1) % 4 ;
 64                         var img_ele = $('<img>');
 65                         img_ele.attr('mid',v.id);
 66                         img_ele.attr('src',v.img);
 67                         var p_ele = $('<p>').html(v.title);
 68                         $('.outer').children().eq(i).append(img_ele);
 69                         $('.outer').children().eq(i).append(p_ele);
 70                         if((index+1)== data.length){
 71                             that.last_position = i;
 72                             that.nid = v.id;
 73                         }
 74 
 75                     })
 76                 }else {
 77                     that.is_end = true;
 78                 }
 79 
 80             }
 81         })
 82         }
 83         this.scroll_func = function () {
 84             var that = this
 85             $(window).scroll(function () {
 86                 var doc_height = $(document).height(); //html文档的高度
 87                 var win_height = $(window).height(); //窗口的高度
 88                 var scroll_height = $(window).scrollTop();   //滚动高度
 89                 //当窗口高度 加上 滚动高度 等于 文档高度时 就说明已经拉到底了
 90                 if((scroll_height+win_height)==doc_height){
 91                     if(!that.is_end){
 92                         that.img_init()
 93                     }
 94 
 95                 }
 96             })
 97         }
 98     }
 99 
100 
101 
102 </script>
103 
104 </body>
105 </html>