Django 瀑布流图片显示实现
展示页面分为4列，通过瀑布流的方式进行显示，鼠标滚轮滚到页面最下方的时候，再次展示新的图片（由于测试图片少，反复进行显示）
URL：
urlpatterns = [ path('admin/', admin.site.urls), path('img/', views.img), path('get_imgs/', views.get_imgs),
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
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)
template：
这里最主要的就是ajax和JavaScript的代码，需要定义一个类似于类的函数，将需要使用的变量包裹进入
最需要注意的就是this的使用，在函数嵌套中，this的含义不同，需要进行转化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .w{ 1000px; margin: 0 auto; } .item{ 25%; float: left; } .item img{ 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>