如何在TS中实现图片两列排序

在TypeScript (TS) 中，为了实现图片的两列排序，你可以结合HTML、CSS和JavaScript（通常使用库如React或Vue来管理状态）。这里提供一个简单的步骤：

1. HTML结构:
创建一个包含图片的容器，比如两个`<div>`元素，每个代表一列。例如：

   <div class="image-grid">
     <div id="column1"></div>
     <div id="column2"></div>
   </div>

2. CSS样式:
使用Flexbox 或 Grid布局对列进行管理，并添加一些基本样式，比如图片宽度和间距等。

   .image-grid {
     display: flex;
     justify-content: space-between;
   }
   
   #column1, #column2 {
     flex: 0 0 calc(50% - 10px); /* 设置列宽并减去间距 */
   }

3. TypeScript + JavaScript:
- 获取图片元素：假设图片元素已通过ID获取，并存储在一个数组中。
- 定义排序函数：可以使用一个比较函数，根据需要的排序标准（例如按文件名、上传时间等）对图片数组进行排序。
- 更新DOM：使用数组的`map()`方法创建新的DOM元素，并将它们插入到对应的列。

示例代码（简化版）：

import React from 'react';

interface Image {
  src: string;
  // 其他属性...
}

const images: Image[] = ... // 图片数据

function sortImagesByColumn(columnIndex: number): Image[] {
  return images.sort((a, b) => {
    // 按某种规则排序
    // 这里仅作演示，实际应用需替换为实际的排序逻辑
    if (columnIndex === 1) { // 列1排序逻辑
      return a.alt.localeCompare(b.alt);
    } else { // 列2排序逻辑
      return a.src.localeCompare(b.src);
    }
  });
}

function Column(columnIndex: number) {
  const sortedImages = sortImagesByColumn(columnIndex);

  return (
    <div id={"column" + columnIndex}>
      {sortedImages.map((img, index) => (
        <img key={index} src={img.src} alt={img.alt} />
      ))}
    </div>
  );
}

function App() {
  return (
    <div className="image-grid">
      <Column columnIndex={1} />
      <Column columnIndex={2} />
    </div>
  );
}

export default App;