Django实现瀑布流

瀑布流

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。

数据存放方式

实现方式：利用jquery中的Ajax实现

思路：

1、设计数据库

2、访问页面

3、发送Ajax请求

4、Ajax获取数据，进行求余，归类，生成图片然后添加到对应的类中

实现：

1、设计数据库，先创建基本表，然后在admin模块中添加数据

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

    class Meta:
        verbose_name_plural='图片表'

    def __str__(self):
        return self.title
    
 #admin.py
from app01 import models
admin.site.register(models.Img)

2、建立路由，后台进行判断，并返回数据

#url.py
from app01 import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('img.html',views.imgs),
    path('get_imgs.html',views.get_imgs),
]

#view.py
from django.http import JsonResponse
from app01 import models
import json

def imgs(request):
    img_list=models.Img.objects.all()
    return render(request,'img.html',{'img_list':img_list})

def get_imgs(request):
    nid =request.GET.get('nid')
    img_list=models.Img.objects.filter(id__gt=nid).values('id','src','title')
    img_list=list(img_list)
    ret={
        'status':True,
        'data':img_list
    }
    return JsonResponse(ret)

3、前端获取Ajax接受返回的数据，进行分类后填充标签到指定的div中

//img.html
<!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.4.0.min.js"></script>
    <script>
        $(function () {
            initImg();
        })
        NID=0;
        function initImg(){
            $.ajax({
                url:'/get_imgs.html',
                type:'GET',
                data:{nid:NID},
                dataType:'JSON',
                success:function (arg) {
                    var img_list=arg.data;
                    $.each(img_list,function (index,v) {
                        //index为索引,v为图片
                        var eqv=index % 4;
                        var tag =document.createElement('img');
                        tag.src='/'+v.src;
                        $('#container').children().eq(eqv).append(tag);
                    })
                }
            })
        }
    </script>
</body>
</html>

### 滚轮刷新

当页面上的滚轮往下滑的时候，窗口显示的图片应有所变化，即从数据库中重新取数据来显示在页面上，所以应当设计一个监听滚轮的函数，

$(window).scroll(function () {
                //当窗口高度+滚轮条滑动高度=文档高度时，滚轮达到最底部
                    var docHeight=$(document).height();
                    var winHeight=$(window).height();
                    var scrollTop=$(window).scrollTop();
                    if (winHeight+scrollTop==docHeight){
                        that.initImg();
                    }
            })

在之前我们定义了两个全局变量，而这对于多人合作工作时是个不好的习惯，因为你不知道会不会对方用了相同的变量名，所以这里定义了一个类，用this的方法来解决这个问题

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

        function ScrollImg(){
            this.nid=0;
            this.lastpostion=0;
            this.initImg=function () {
                var that =this;
                $.ajax({
                    url:'/get_imgs.html',
                    type:'GET',
                    data:{nid:that.nid},
                    dataType:'JSON',
                    success:function (arg) {
                        var img_list=arg.data;
                        $.each(img_list,function (index,v) {
                            //index为索引,v为图片
                            var eqv=(index+that.lastpostion) % 4;
                            var tag =document.createElement('img');
                            var div = document.createElement('div');
                            //图片
                            tag.src='/'+v.src;
                            var p1 = document.createElement('p');
                            var p2 = document.createElement('p');
                            //标题
                            p1.innerText = v.title;
                            //简介
                            p2.innerText=v.summary;
                            div.appendChild(p1);
                            div.appendChild(p2);
                            $('#container').children().eq(eqv).append(tag,div);
                            //当循环到最后一个图片时，将图片id复制给NID
                            if(index+1==img_list.length){
                                //that.nid=v.id;
                                that.lastpostion=eqv+1;
                            }
                        })
                    }
            })
            };
            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>