按高度/方向排序图片：Django网格相册竖图排版优化需求

嘿，这个问题我之前做相册项目时也踩过坑！竖版图片乱入网格确实会把整行布局搅得乱七八糟，分享几个我亲测有效的方案，不用手动调整图片顺序就能把竖版图片乖乖集中到底部：

这个方法的核心是提前把图片的横/竖方向存在数据库里，查询时直接按这个字段排序，性能最好，也最稳定。

第一步：修改Photo模型 #

先给模型加一个orientation字段，用来标记图片方向，然后重写save方法，在保存图片时自动判断方向：

from django.db import models
from PIL import Image

class Photo(models.Model):
    # 定义方向选项
    ORIENTATION_CHOICES = (
        ('landscape', '横版'),
        ('portrait', '竖版'),
        ('square', '正方形'),
    )
    title = models.CharField(max_length=150)
    image = models.ImageField()
    description = models.TextField(blank=True)
    category = models.ForeignKey('Category', on_delete=models.CASCADE)  # 补全你原有的category关联
    orientation = models.CharField(max_length=20, choices=ORIENTATION_CHOICES, default='landscape')

    def save(self, *args, **kwargs):
        # 保存时自动检测图片方向
        if self.image:
            with Image.open(self.image) as img:
                width, height = img.size
                if width > height:
                    self.orientation = 'landscape'
                elif height > width:
                    self.orientation = 'portrait'
                else:
                    self.orientation = 'square'
        # 调用父类的save方法完成保存
        super().save(*args, **kwargs)

注意：需要先安装Pillow库（pip install pillow），它用来读取图片尺寸。

第二步：批量更新现有图片的方向 #

如果你的相册已经有很多图片了，需要跑个脚本把旧图片的方向字段补上：

# 可以在Django shell里执行，或者写成独立脚本
from myapp.models import Photo
from PIL import Image
import os
from django.conf import settings

for photo in Photo.objects.all():
    if photo.image:
        img_path = os.path.join(settings.MEDIA_ROOT, str(photo.image))
        with Image.open(img_path) as img:
            width, height = img.size
            if width > height:
                photo.orientation = 'landscape'
            elif height > width:
                photo.orientation = 'portrait'
            else:
                photo.orientation = 'square'
            photo.save()

第三步：查询时按方向排序 #

在视图里（不管是函数视图还是类视图），查询图片时按orientation排序，把竖版放最后：

# 函数视图示例
def photo_list(request):
    # 用Case/When自定义排序优先级：横版 > 正方形 > 竖版
    photos = Photo.objects.all().annotate(
        sort_order=models.Case(
            models.When(orientation='landscape', then=models.Value(1)),
            models.When(orientation='square', then=models.Value(2)),
            models.When(orientation='portrait', then=models.Value(3)),
            default=models.Value(3),
            output_field=models.IntegerField(),
        )
    ).order_by('sort_order')
    return render(request, 'photo/list.html', {'photos': photos})

# 类视图（ListView）示例
class PhotoListView(ListView):
    model = Photo
    template_name = 'photo/list.html'
    context_object_name = 'photos'

    def get_queryset(self):
        queryset = super().get_queryset()
        return queryset.annotate(
            sort_order=models.Case(
                models.When(orientation='landscape', then=models.Value(1)),
                models.When(orientation='square', then=models.Value(2)),
                models.When(orientation='portrait', then=models.Value(3)),
                default=models.Value(3),
                output_field=models.IntegerField(),
            )
        ).order_by('sort_order')

如果不想改动数据库，也可以在查询后在内存里排序，但图片多的话性能会受影响，适合图片数量少的场景：

from PIL import Image
import os
from django.conf import settings
from myapp.models import Photo

def get_orientation(photo):
    # 获取图片的本地路径
    img_path = os.path.join(settings.MEDIA_ROOT, str(photo.image))
    with Image.open(img_path) as img:
        return 'portrait' if img.height > img.width else 'landscape'

# 获取所有图片并排序：横版在前，竖版在后
photos = list(Photo.objects.all())
photos.sort(key=lambda x: get_orientation(x) == 'portrait')

即使后端排好序了，网格布局可能还需要CSS调整避免错乱，比如用CSS Grid的grid-auto-flow: dense，或者给竖版图片设置固定的网格占比：

<!-- 示例：用CSS Grid布局 -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
  {% for photo in photos %}
    <div style="grid-column: span 1;">
      <img src="{{ photo.image.url }}" alt="{{ photo.title }}" style="width: 100%; height: auto; object-fit: cover;">
    </div>
  {% endfor %}
</div>

如果竖版图片高度较高，也可以给它设置grid-row: span 2，让它占两行空间，这样不会打乱其他行的布局。

内容的提问来源于stack exchange，提问作者Bruinen