当前位置： 首页 > news >正文

HTML 结构搭建 (列与卡片)

news 2026/5/11 23:00:09

欢迎来到本系列的第8篇。在前几篇中，我们处理了点击、滑动和异步加载。今天，我们要解放鼠标，实现**“拖拽 (Drag and Drop)”**交互。

看板（Kanban）是任务管理的经典视图。一个标准的看板包含多个“列”（如待办、进行中、已完成），用户可以通过拖拽将“任务卡片”在这些列之间移动，或者在同一列中重新排序。

本篇我们将手写一个原生看板，不依赖任何第三方库（如 React-DnD 或 Sortable.js），直接驾驭浏览器底层 API。

第一部分：HTML 结构搭建 (列与卡片)

HTML 结构反映了看板的逻辑层级：

看板容器 (.board)：横向排列所有列。

列 (.column)：包含标题和任务列表容器。

任务列表 (.task-list)：这是卡片的“放置区 (Drop Zone)”。

卡片 (.card)：这是可被拖拽的元素，必须设置 draggable="true"。

<body>

<div class="app-container">
<h1>项目任务看板</h1>
<p>试着把卡片拖动到不同的列，或者调整它们的顺序。</p>

<!-- 1. 看板主容器 -->
<div id="kanban-board" class="board">

<!-- 列 1: 待办事项 -->
<div class="column">
<div class="column-header">
<span class="column-title">待办 (Todo)</span>
<span class="column-count">3</span>
</div>
<!-- 放置区 -->
<div class="task-list" id="todo-list">
<!-- 卡片 A -->
<div class="card" draggable="true" id="card-1">
<div class="card-tag tag-design">设计</div>
<p class="card-text">设计新的登录页面 UI</p>
</div>
<!-- 卡片 B -->
<div class="card" draggable="true" id="card-2">
<div class="card-tag tag-dev">开发</div>
<p class="card-text">修复 API 接口 500 错误</p>
</div>
<!-- 卡片 C -->
<div class="card" draggable="true" id="card-3">
<div class="card-tag tag-test">测试</div>
<p class="card-text">编写自动化测试用例</p>
</div>
</div>
</div>

<!-- 列 2: 进行中 -->
<div class="column">
<div class="column-header">
<span class="column-title">进行中 (In Progress)</span>
<span class="column-count">1</span>
</div>
<div class="task-list" id="progress-list">
<!-- 卡片 D -->
<div class="card" draggable="true" id="card-4">
<div class="card-tag tag-dev">开发</div>
<p class="card-text">重构用户验证模块</p>
</div>
</div>
</div>

<!-- 列 3: 已完成 -->
<div class="column">
<div class="column-header">
<span class="column-title">已完成 (Done)</span>
<span class="column-count">1</span>
</div>
<div class="task-list" id="done-list">
<!-- 卡片 E -->
<div class="card" draggable="true" id="card-5">
<div class="card-tag tag-ops">运维</div>
<p class="card-text">服务器安全补丁更新</p>
</div>
</div>
</div>

</div>
</div>

</body>


第二部分：CSS 样式 (布局与拖拽反馈)

CSS 的关键在于：

使用 Flexbox 横向排列“列”。

为拖拽中的元素 (.dragging) 设置样式，以便用户知道哪个元素正在被移动。

确保 .task-list 有最小高度，否则当它为空时，用户无法将卡片拖进去。

/* --- 基础布局 --- */
body {
background-color: #f4f7f6;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: #333;
display: flex;
justify-content: center;
min-height: 100vh;
}

.app-container {
width: 100%;
max-width: 1200px;
padding: 40px 20px;
}

h1 { text-align: center; margin-bottom: 10px; }
p { text-align: center; color: #666; margin-bottom: 40px; }

/* --- 看板容器 --- */
.board {
display: flex;
gap: 20px;
align-items: flex-start; /* 让列的高度根据内容自适应，不要强制拉伸 */
overflow-x: auto; /* 移动端支持横向滚动 */
padding-bottom: 20px;
}

/* --- 列样式 --- */
.column {
background-color: #e2e4e6;
border-radius: 8px;
width: 300px; /* 固定列宽 */
flex-shrink: 0; /* 防止列被压缩 */
display: flex;
flex-direction: column;
max-height: 80vh; /* 防止列太高 */
}

.column-header {
padding: 15px;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.column-count {
background-color: rgba(0,0,0,0.1);
border-radius: 12px;
padding: 2px 8px;
font-size: 0.8em;
}

/* --- 任务列表 (Drop Zone) --- */
.task-list {
padding: 10px;
flex-grow: 1;
min-height: 100px; /* 核心：保证空列表也能接收拖拽 */
overflow-y: auto;
}

/* --- 卡片样式 --- */
.card {
background-color: #fff;
border-radius: 6px;
padding: 15px;
margin-bottom: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
cursor: grab; /* 鼠标手势：抓取 */
transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.card:active {
cursor: grabbing; /* 鼠标手势：正在抓取 */
}

/* 标签样式 */
.card-tag {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
margin-bottom: 8px;
color: white;
}
.tag-design { background-color: #ff9f43; }
.tag-dev { background-color: #54a0ff; }
.tag-test { background-color: #ee5253; }
.tag-ops { background-color: #10ac84; }

.card-text {
margin: 0;
line-height: 1.5;
}

/* --- 拖拽状态样式 (由 JS 添加) --- */
.card.dragging {
opacity: 0.5; /* 让原元素变半透明 */
border: 2px dashed #999;
box-shadow: none;
}


第三部分：JS 交互逻辑 (Drag & Drop API)

这是最神奇的部分。HTML5 拖拽 API 默认并不支持“自动排序”或“插入到指定位置”，它只告诉我们“拖了谁”和“在哪松手”。

我们需要编写一个算法来计算鼠标位置，从而决定将卡片插入到列表的哪个位置。

document.addEventListener('DOMContentLoaded', () => {

// 1. 获取所有可拖拽的卡片和容器
const draggables = document.querySelectorAll('.card');
const containers = document.querySelectorAll('.task-list');

// --- 2. 处理卡片的拖拽事件 ---
draggables.forEach(draggable => {

// 开始拖拽
draggable.addEventListener('dragstart', () => {
// 添加类名，改变样式
draggable.classList.add('dragging');
});

// 结束拖拽
draggable.addEventListener('dragend', () => {
// 移除类名
draggable.classList.remove('dragging');
});
});

// --- 3. 处理容器的放置事件 ---
containers.forEach(container => {

// 当有元素在容器上方拖动时触发
container.addEventListener('dragover', (e) => {
// 核心：默认情况下，浏览器禁止将元素 Drop 到另一个元素内
// 我们必须阻止默认行为，才能允许 Drop
e.preventDefault();

// 获取当前正在被拖拽的元素
const afterElement = getDragAfterElement(container, e.clientY);
const draggable = document.querySelector('.dragging');

// 核心逻辑：决定插入位置
// 如果 afterElement 为 null，说明我们在列表最下方，直接 append
// 否则，插在 afterElement 之前
if (afterElement == null) {
container.appendChild(draggable);
} else {
container.insertBefore(draggable, afterElement);
}
});
});

// --- 4. 辅助算法：计算插入位置 ---
// 这个函数的作用是：根据鼠标的 Y 坐标，找到鼠标下方的那个元素
// 这样我们就知道该把拖拽元素插到哪里了
function getDragAfterElement(container, y) {

// 获取容器内所有 *没有* 被拖拽的卡片
// 这里的 :not(.dragging) 很重要，排除掉自己
const draggableElements = [...container.querySelectorAll('.card:not(.dragging)')];

// 使用 reduce 循环，找出距离鼠标最近的那个元素
return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect();

// 计算鼠标 Y 坐标与元素中心点的距离
// offset < 0 表示鼠标在元素中心点上方
const offset = y - box.top - box.height / 2;

// 我们只关心鼠标在元素上方的情况 (offset < 0)
// 并且要找那个距离最近的 (offset 最大，最接近 0)
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child };
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY }).element;
}

});


总结

恭喜！您刚刚手写了一个功能完备的看板系统。

我们学到了：

HTML5 Drag and Drop API：dragstart 用于标记源元素，dragover 用于实时计算位置，appendChild 用于移动 DOM 元素（是的，移动 DOM 不需要删除再新建，直接 append 就会自动移动）。

位置计算算法：如何利用 getBoundingClientRect 和鼠标坐标 clientY 来精确定位插入点。这是所有排序类 UI 库的核心原理。

掌握了这个，您就可以轻松实现列表排序、文件上传拖拽等高级交互功能。

 

https://weibo.com/ttarticle/p/show?comment=1&id=2309405297493516091596
https://weibo.com/ttarticle/p/show?id=2309405297493566161600
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297493566161600
https://weibo.com/ttarticle/p/show?id=2309405297493620687500
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297493620687500
https://weibo.com/ttarticle/p/show?id=2309405297493675475607
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297493675475607
https://weibo.com/ttarticle/p/show?id=2309405297493738390227
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297493738390227
https://weibo.com/ttarticle/p/show?id=2309405297493813887166
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297493813887166
https://weibo.com/ttarticle/p/show?id=2309405297493864219430
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297493864219430
https://weibo.com/ttarticle/p/show?id=2309405297493918744655
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297493918744655
https://weibo.com/ttarticle/p/show?id=2309405297493989785602
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297493989785602
https://weibo.com/ttarticle/p/show?id=2309405297494069477751
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297494069477751
https://weibo.com/ttarticle/p/show?id=2309405297494124003816
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297494124003816
https://weibo.com/ttarticle/p/show?id=2309405297494182985827
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297494182985827
https://weibo.com/ttarticle/p/show?id=2309405297494266609839
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297494266609839
https://weibo.com/ttarticle/p/show?id=2309405297494342107882
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297494342107882
https://weibo.com/ttarticle/p/show?id=2309405297494455615830
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297494455615830
https://weibo.com/ttarticle/p/show?id=2309405297494522462736
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297494522462736
https://weibo.com/ttarticle/p/show?id=2309405297494602154340
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297494602154340
https://weibo.com/ttarticle/p/show?id=2309405297494660874258
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297494660874258
https://weibo.com/ttarticle/p/show?id=2309405297494761800310
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297494761800310
https://weibo.com/ttarticle/p/show?id=2309405297494849618564
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297494849618564
https://weibo.com/ttarticle/p/show?id=2309405297494908600560
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297494908600560
https://weibo.com/ttarticle/p/show?id=2309405297495034167731
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297495034167731
https://weibo.com/ttarticle/p/show?id=2309405297495143219517
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297495143219517
https://weibo.com/ttarticle/p/show?id=2309405297495206134578
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297495206134578
https://weibo.com/ttarticle/p/show?id=2309405297495265116403
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297495265116403
https://weibo.com/ttarticle/p/show?id=2309405297495349002288
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297495349002288
https://weibo.com/ttarticle/p/show?id=2309405297495470375380
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297495470375380
https://weibo.com/ttarticle/p/show?id=2309405297495541678163
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297495541678163
https://weibo.com/ttarticle/p/show?id=2309405297495612981693
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297495612981693
https://weibo.com/ttarticle/p/show?id=2309405297495713906866
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297495713906866
https://weibo.com/ttarticle/p/show?id=2309405297495797793173
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297495797793173
https://weibo.com/ttarticle/p/show?id=2309405297495893999688
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297495893999688
https://weibo.com/ttarticle/p/show?id=2309405297200015474715
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297200015474715
https://weibo.com/ttarticle/p/show?id=2309405297200321396769
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297200321396769
https://weibo.com/ttarticle/p/show?id=2309405297289253224677
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297289253224677
https://weibo.com/ttarticle/p/show?id=2309405297289383510031
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297289383510031
https://weibo.com/ttarticle/p/show?id=2309405297289492561964
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297289492561964
https://weibo.com/ttarticle/p/show?id=2309405297289605546078
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297289605546078
https://weibo.com/ttarticle/p/show?id=2309405297289664528423
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297289664528423
https://weibo.com/ttarticle/p/show?id=2309405297289710403800
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297289710403800
https://weibo.com/ttarticle/p/show?id=2309405297289785901131
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297289785901131
https://weibo.com/ttarticle/p/show?id=2309405297289840689277
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297289840689277
https://weibo.com/ttarticle/p/show?id=2309405297289899409410
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297289899409410
https://weibo.com/ttarticle/p/show?id=2309405297464222810281
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297464222810281
https://weibo.com/ttarticle/p/show?id=2309405297464273141932
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297464273141932
https://weibo.com/ttarticle/p/show?id=2309405297470078058573
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297470078058573
https://weibo.com/ttarticle/p/show?id=2309405297470145429907
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297470145429907
https://weibo.com/ttarticle/p/show?id=2309405297470208344455
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297470208344455
https://weibo.com/ttarticle/p/show?id=2309405297470271259036
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297470271259036
https://weibo.com/ttarticle/p/show?id=2309405297470333911472
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297470333911472
https://weibo.com/ttarticle/p/show?id=2309405297470430380174
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297470430380174
https://weibo.com/ttarticle/p/show?id=2309405297470497489173
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297470497489173
https://weibo.com/ttarticle/p/show?id=2309405297470568792091
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297470568792091
https://weibo.com/ttarticle/p/show?id=2309405297470648483998
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297470648483998
https://weibo.com/ttarticle/p/show?id=2309405297470736564287
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297470736564287
https://weibo.com/ttarticle/p/show?id=2309405297470795284604
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297470795284604
https://weibo.com/ttarticle/p/show?id=2309405297470858199118
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297470858199118
https://weibo.com/ttarticle/p/show?id=2309405297470980096204
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297470980096204
https://weibo.com/ttarticle/p/show?id=2309405297471038816422
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297471038816422
https://weibo.com/ttarticle/p/show?id=2309405297471105925318
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297471105925318
https://weibo.com/ttarticle/p/show?id=2309405297471168577753
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297471168577753
https://weibo.com/ttarticle/p/show?id=2309405297471231492225
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297471231492225
https://weibo.com/ttarticle/p/show?id=2309405297471298863253
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297471298863253
https://weibo.com/ttarticle/p/show?id=2309405297471353127055
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297471353127055
https://weibo.com/ttarticle/p/show?id=2309405297471466635327
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297471466635327
https://weibo.com/ttarticle/p/show?id=2309405297471520899200
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297471520899200
https://weibo.com/ttarticle/p/show?id=2309405297471575687521
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297471575687521
https://weibo.com/ttarticle/p/show?id=2309405297471634407598
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297471634407598
https://weibo.com/ttarticle/p/show?id=2309405297471692865575
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297471692865575
https://weibo.com/ttarticle/p/show?id=2309405297471747653702
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297471747653702
https://weibo.com/ttarticle/p/show?id=2309405297471986729321
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297471986729321
https://weibo.com/ttarticle/p/show?id=2309405297472041255128
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297472041255128
https://weibo.com/ttarticle/p/show?id=2309405297472095518872
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297472095518872
https://weibo.com/ttarticle/p/show?id=2309405297472150044856
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297472150044856
https://weibo.com/ttarticle/p/show?id=2309405297472263291050
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297472263291050
https://weibo.com/ttarticle/p/show?id=2309405297472318079207
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297472318079207
https://weibo.com/ttarticle/p/show?id=2309405297472372343025
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297472372343025
https://weibo.com/ttarticle/p/show?id=2309405297472481394892
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297472481394892
https://weibo.com/ttarticle/p/show?id=2309405297472540377178
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297472540377178
https://weibo.com/ttarticle/p/show?id=2309405297472594640988
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297472594640988
https://weibo.com/ttarticle/p/show?id=2309405297472649166881
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297472649166881
https://weibo.com/ttarticle/p/show?id=2309405297472703955102
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297472703955102
https://weibo.com/ttarticle/p/show?id=2309405297473064402994
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297473064402994
https://weibo.com/ttarticle/p/show?id=2309405297473114734773
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297473114734773
https://weibo.com/ttarticle/p/show?id=2309405297473169522753
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297473169522753
https://weibo.com/ttarticle/p/show?id=2309405297473219854566
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297473219854566
https://weibo.com/ttarticle/p/show?id=2309405297473274380359
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297473274380359
https://weibo.com/ttarticle/p/show?id=2309405297473328644216
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297473328644216
https://weibo.com/ttarticle/p/show?id=2309405297473378976033
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297473378976033
https://weibo.com/ttarticle/p/show?id=2309405297473433763999
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297473433763999
https://weibo.com/ttarticle/p/show?id=2309405297473483833625
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297473483833625
https://weibo.com/ttarticle/p/show?id=2309405297473538359454
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297473538359454
https://weibo.com/ttarticle/p/show?id=2309405297473593147413
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297473593147413
https://weibo.com/ttarticle/p/show?id=2309405297473643479437
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297473643479437
https://weibo.com/ttarticle/p/show?id=2309405297473698005037
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297473698005037
https://weibo.com/ttarticle/p/show?id=2309405297473748336833
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297473748336833
https://weibo.com/ttarticle/p/show?id=2309405297473802600715
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297473802600715
https://weibo.com/ttarticle/p/show?id=2309405297473861320842
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297473861320842
https://weibo.com/ttarticle/p/show?id=2309405297473916108886
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297473916108886
https://weibo.com/ttarticle/p/show?id=2309405297473970372650
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297473970372650
https://weibo.com/ttarticle/p/show?id=2309405297474020966669
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297474020966669
https://weibo.com/ttarticle/p/show?id=2309405297474083619066
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297474083619066
https://weibo.com/ttarticle/p/show?id=2309405297474142601279
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297474142601279
https://weibo.com/ttarticle/p/show?id=2309405297474196865246
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297474196865246
https://weibo.com/ttarticle/p/show?id=2309405297474251391306
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297474251391306
https://weibo.com/ttarticle/p/show?id=2309405297474306179460
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297474306179460
https://weibo.com/ttarticle/p/show?id=2309405297474360443102
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297474360443102
https://weibo.com/ttarticle/p/show?id=2309405297474423619626
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297474423619626
https://weibo.com/ttarticle/p/show?id=2309405297474473689386
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297474473689386
https://weibo.com/ttarticle/p/show?id=2309405297474528477512
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297474528477512
https://weibo.com/ttarticle/p/show?id=2309405297474587197657
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297474587197657
https://weibo.com/ttarticle/p/show?id=2309405297474641723659
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297474641723659
https://weibo.com/ttarticle/p/show?id=2309405297474696249355
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297474696249355
https://weibo.com/ttarticle/p/show?id=2309405297474746581230
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297474746581230
https://weibo.com/ttarticle/p/show?id=2309405297474800845035
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297474800845035
https://weibo.com/ttarticle/p/show?id=2309405297474855632998
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297474855632998
https://weibo.com/ttarticle/p/show?id=2309405297474909896946
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297474909896946
https://weibo.com/ttarticle/p/show?id=2309405297474964423151
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297474964423151
https://weibo.com/ttarticle/p/show?id=2309405297475018948714
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297475018948714
https://weibo.com/ttarticle/p/show?id=2309405297475073474732
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297475073474732
https://weibo.com/ttarticle/p/show?id=2309405297475128262874
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297475128262874
https://weibo.com/ttarticle/p/show?id=2309405297475182526491
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297475182526491
https://weibo.com/ttarticle/p/show?id=2309405297476088758449
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297476088758449
https://weibo.com/ttarticle/p/show?id=2309405297476151410858
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297476151410858
https://weibo.com/ttarticle/p/show?id=2309405297476222976157
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297476222976157
https://weibo.com/ttarticle/p/show?id=2309405297476281434165
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297476281434165
https://weibo.com/ttarticle/p/show?id=2309405297476340154809
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297476340154809
https://weibo.com/ttarticle/p/show?id=2309405297476403331280
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297476403331280
https://weibo.com/ttarticle/p/show?id=2309405297476499800083
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297476499800083
https://weibo.com/ttarticle/p/show?id=2309405297476562714713
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297476562714713
https://weibo.com/ttarticle/p/show?id=2309405297476654727259
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297476654727259
https://weibo.com/ttarticle/p/show?id=2309405297476717904101
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297476717904101
https://weibo.com/ttarticle/p/show?id=2309405297476818305095
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297476818305095
https://weibo.com/ttarticle/p/show?id=2309405297476894064833
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297476894064833
https://weibo.com/ttarticle/p/show?id=2309405297476965105810
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297476965105810
https://weibo.com/ttarticle/p/show?id=2309405297477028020407
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297477028020407
https://weibo.com/ttarticle/p/show?id=2309405297477086740697
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297477086740697
https://weibo.com/ttarticle/p/show?id=2309405297477141528753
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297477141528753
https://weibo.com/ttarticle/p/show?id=2309405297477195792510
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297477195792510
https://weibo.com/ttarticle/p/show?id=2309405297477250318497
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297477250318497
https://weibo.com/ttarticle/p/show?id=2309405297477300912236
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297477300912236
https://weibo.com/ttarticle/p/show?id=2309405297477401313317
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297477401313317
https://weibo.com/ttarticle/p/show?id=2309405297477455839426
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297477455839426
https://weibo.com/ttarticle/p/show?id=2309405297477510627377
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297477510627377
https://weibo.com/ttarticle/p/show?id=2309405297477560696930
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297477560696930
https://weibo.com/ttarticle/p/show?id=2309405297477611290802
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297477611290802
https://weibo.com/ttarticle/p/show?id=2309405297477669748772
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297477669748772
https://weibo.com/ttarticle/p/show?id=2309405297477724536839
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297477724536839
https://weibo.com/ttarticle/p/show?id=2309405297477821005914
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297477821005914
https://weibo.com/ttarticle/p/show?id=2309405297477871075442
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297477871075442
https://weibo.com/ttarticle/p/show?id=2309405297477921669274
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297477921669274
https://weibo.com/ttarticle/p/show?id=2309405297477972000984
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297477972000984
https://weibo.com/ttarticle/p/show?id=2309405297478076596462
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297478076596462
https://weibo.com/ttarticle/p/show?id=2309405297478131384544
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297478131384544
https://weibo.com/ttarticle/p/show?id=2309405297478185648133
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297478185648133
https://weibo.com/ttarticle/p/show?id=2309405297478235979983
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297478235979983
https://weibo.com/ttarticle/p/show?id=2309405297478286311679
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297478286311679
https://weibo.com/ttarticle/p/show?id=2309405297478340837808
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297478340837808
https://weibo.com/ttarticle/p/show?id=2309405297478395363436
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297478395363436
https://weibo.com/ttarticle/p/show?id=2309405297478449889383
https://weibo.com/ttarticle/p/show?comment=1&id=2309405297478449889383

http://www.jsqmd.com/news/798600/

相关文章：

  • 芯片EOS失效分析与静态电压传播验证方法详解
  • 别再死记硬背了！用一张图+代码片段，彻底搞懂Element UI Menu组件的嵌套关系
  • HandBrake下载安装与视频压缩教程（2026最新版）
  • latex 显示中文 - MKT
  • 从电桥到功放：拆解一个双工对讲机电路，聊聊模拟音频设计的那些门道
  • Everything-Claude-Code 深度解析 —— 给 AI 编程装上 “涡轮增压” 引擎
  • DenseNet的‘特征复用’到底强在哪？用CIFAR-10数据集带你做一次对比实验
  • Unity Mesh优化实战：从顶点压缩到数据剔除的完整指南
  • Windows 国内安装 Claude Code CLI 指南
  • YOLOv11 改进 - 注意力机制 LSKA大核分离卷积注意力：轻量级设计实现动态大感受野，优化小目标检测鲁棒性
  • 超声波实时压接质量检测：从NASA技术看高可靠性连接的无损评估革命
  • 大核小核架构的演进：从DVFS到异构计算，应对先进制程挑战
  • NotebookLM Audio Overview终极指南，覆盖采样率适配、噪声抑制阈值调优、以及语音嵌入向量维度坍缩规避策略
  • 环境准备与构建“脏”数据
  • 【Sora 2视频集成终极指南】：ChatGPT原生调用、API对接、帧级控制与多模态工作流落地实录（2024官方SDK首曝）
  • 暗黑破坏神2存档修改器终极指南：5分钟打造完美游戏角色
  • 5分钟免费解锁iPhone激活锁：applera1n实用指南
  • 告别繁琐槽函数！用C++11 Lambda简化Qt信号连接（附QSlider/QPushButton实例）
  • JScope RTT模式实战：为STM32F4实现最高2MB/s的数据流监控（含代码移植避坑点）
  • Windows三指拖拽终极指南：轻松实现macOS级触控体验
  • 质谱高端访谈Gary Siuzdak
  • 从Distributed到Lumped：三种SPEF寄生模型，你的芯片时序分析该选哪一个？
  • 从学生成绩表到销售报表：手把手教你用ag-grid列组/行组构建复杂业务表格
  • 2026微型变送器十大品牌有哪些，广东犸力小型变送高端优选 - 品牌速递
  • 从PX4的FRD到Mavros的FLU：一文讲透无人机ROS开发中的坐标系‘翻译’逻辑
  • 20254218 2025-2026-2 《Python程序设计》实验3报告
  • Ice：macOS菜单栏终极管理方案，让你的桌面瞬间清爽高效
  • FanControl完整指南：3步掌握Windows风扇控制，告别噪音烦恼
  • 如何快速掌握HunterPie：5步实现《怪物猎人世界》智能狩猎监控
  • 2026桥式称重传感器10大排行，广东犸力口碑享誉行业 - 品牌速递