Django 瀑布流图片显示实现

Django 瀑布流图片显示实现

展示页面分为4列，通过瀑布流的方式进行显示，鼠标滚轮滚到页面最下方的时候，再次展示新的图片（由于测试图片少，反复进行显示）

URL：

urlpatterns = [
    path('admin/', admin.site.urls),
    path('img/', views.img),
    path('get_imgs/', views.get_imgs),

URL

models：

class Img(models.Model):
    src = models.FileField(max_length=32, verbose_name='图片路径', upload_to='static/upload')
    title = models.CharField(max_length=32, verbose_name='标题')
    summary = models.CharField(max_length=128, verbose_name='简介')

    class Meta:
        verbose_name_plural = '图片'

    def __str__(self):
        return self.title

models

views：

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

def get_imgs(request):
    # 从前台获取nid
    nid = request.GET.get('nid')
    # 筛选图片列表，这里筛选了大于nid的图片
    img_list = models.Img.objects.filter(id__gt=nid).values('id', 'src', 'title')
    # 将筛选结果变为了list
    img_list = list(img_list)
    ret = {
        'status': True,
        'data': img_list
    }
    # 返回json格式的ret，给前台的ajax
    return JsonResponse(ret)

View Code

template：

这里最主要的就是ajax和JavaScript的代码，需要定义一个类似于类的函数，将需要使用的变量包裹进入

最需要注意的就是this的使用，在函数嵌套中，this的含义不同，需要进行转化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .w{
            width: 1000px;
            margin: 0 auto;
        }
        .item{
            width: 25%;
            float: left;
        }
        .item img{
            width: 100%;
        }
    </style>
</head>
<body>

    <div>美食</div>
    <div class="w" id="container">

        <div class="item">

        </div>
        <div class="item">

        </div>
        <div class="item">

        </div>
        <div class="item">

        </div>
    </div>
    <script src="/static/jquery-3.1.1.min.js"></script>
    <script>
        $(function () {
            var obj = new ScrollImg();
            obj.initImg();
            obj.scrollEvent();
        });

        function ScrollImg(){
            // 设置起始nid为0，设置起始的lastPosition为3，主要是因为在计算余数时第一个数需要结果为0
            this.nid = 0;
            this.lastPosition = 3;
            this.initImg =function () {
                //将this转换为that，确保后面调用的时候不会出现错误
                var that = this;
                $.ajax({
                    url:'/get_imgs',
                    type:'GET',
                    data:{nid:that.nid},
                    dataType:'JSON',
                    success:function (arg) {
                        // 此时的arg是后台传来的字典格式的数据
                        var img_list = arg.data;
                        // 循环处理每一个图片信息，其中index是id号，v就是图片信息1，1.jpg，title】
                        $.each(img_list,function (index,v) {
                            // console.log(index,v);
                            // 计算取余，得到eqv是0，1，2，3
                            var eqv = (index+that.lastPosition+1) % 4 ;
                            // 创建标签tag，并设置src值
                            var tag = document.createElement('img');
                            tag.src = '/' + v.src;
                           // 将tag标签添加到指定的那个item标签中 $('#container').children().eq(eqv).append(tag);
                            if(index+1 == img_list.length){
                                // 为了模拟多数据，将nid暂时取消，理论上应该从数据库不断取出数据
                                // that.nid = v.id;
                                that.lastPosition = eqv;
                            }
                        })
                    }
                });
            };

            this.scrollEvent =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>
</body>
</html>

img.html

Django 瀑布流图片显示实现

猜你喜欢