Gemini 的代码的能力不如 Grok，给的东西太简单。以下是 Grok 给的代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>图片拖拽选择 - 瀑布流</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.selection-box {
border: 2px dashed #3b82f6;
position: fixed;
background: rgba(59, 130, 246, 0.1);
pointer-events: none;
}
.selected {
border: 3px solid #3b82f6;
}
img {
user-select: none;
-webkit-user-drag: none;
height: auto;
}
#container {
column-count: 3;
column-gap: 1rem;
max-width: 1200px;
}
.image-wrapper {
break-inside: avoid;
margin-bottom: 1rem;
position: relative;
}
.size-overlay {
position: absolute;
top: 0.5rem;
left: 0.5rem;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem 0 0 0.25rem; /* 左侧圆角 */
font-size: 0.875rem;
pointer-events: none;
white-space: nowrap;
}
.format-overlay {
position: absolute;
top: 0.5rem;
left: calc(0.5rem + 100px); /* 默认尺寸宽度占位，动态调整 */
background: rgba(50, 50, 50, 0.7); /* 稍微不同的灰色以区分 */
color: white;
padding: 0.25rem 0.5rem;
border-radius: 0 0.25rem 0.25rem 0; /* 右侧圆角 */
font-size: 0.875rem;
pointer-events: none;
white-space: nowrap;
}
.original-link {
position: absolute;
bottom: 0.5rem;
right: 0.5rem;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.875rem;
text-decoration: none;
cursor: pointer;
}
.small-image {
width: auto;
max-width: none;
}
.large-image {
width: 100%;
max-width: 100%;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal img {
max-width: 90%;
max-height: 90%;
width: auto;
height: auto;
}
</style>
</head>
<body class="bg-gray-100 min-h-screen p-8">
<div id="container" class="mx-auto">
<div class="image-wrapper">
<img src="https://picsum.photos/600/400?random=1" class="rounded-lg" />
</div>
<div class="image-wrapper">
<img src="https://picsum.photos/600/800?random=2" class="rounded-lg" />
</div>
<div class="image-wrapper">
<img src="https://picsum.photos/16/16?random=3" class="rounded-lg" />
</div>
<div class="image-wrapper">
<img src="https://picsum.photos/600/700?random=4" class="rounded-lg" />
</div>
<div class="image-wrapper">
<img src="https://picsum.photos/600/900?random=5" class="rounded-lg" />
</div>
<div class="image-wrapper">
<img src="https://picsum.photos/600/600?random=6" class="rounded-lg" />
</div>
</div>
<div class="mt-8 text-center">
<button
id="logButton"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
输出选中的图片
</button>
</div>
<script>
const container = document.getElementById("container");
const images = container.querySelectorAll("img");
const logButton = document.getElementById("logButton");
let isDragging = false;
let selectionBox = null;
let startX, startY;
let modal = null;
let currentIndex = 0;
const imageSources = Array.from(images).map((img) => img.src);
// 动态判断图片大小并添加“原图”链接和格式
images.forEach((img, index) => {
const wrapper = img.parentElement;
img.onload = () => {
const width = img.naturalWidth;
const height = img.naturalHeight;
const isSmall = width <= 50 || height <= 50;
if (isSmall) {
img.classList.add("small-image");
} else {
img.classList.add("large-image");
const sizeOverlay = document.createElement("div");
sizeOverlay.className = "size-overlay";
sizeOverlay.textContent = `${width} × ${height}`;
wrapper.appendChild(sizeOverlay);
// 添加格式文字
const formatOverlay = document.createElement("div");
formatOverlay.className = "format-overlay";
// 从 URL 推测格式（这里假设为 JPG，您可以替换为实际逻辑）
const format = img.src.toLowerCase().includes(".png")
? "PNG"
: "JPG";
formatOverlay.textContent = format;
wrapper.appendChild(formatOverlay);
// 动态调整 format-overlay 的位置
const sizeWidth = sizeOverlay.offsetWidth;
formatOverlay.style.left = `${0.5 * 16 + sizeWidth}px`; // 0.5rem = 8px，转换为像素
}
const originalLink = document.createElement("a");
originalLink.className = "original-link";
originalLink.textContent = "原图";
originalLink.href = "#";
wrapper.appendChild(originalLink);
originalLink.addEventListener("click", (e) => {
e.preventDefault();
currentIndex = index;
showModal(img.src);
});
};
img.addEventListener("click", (e) => {
e.preventDefault();
img.classList.toggle("selected");
});
});
document.addEventListener("mousedown", (e) => {
if (e.button !== 0) return;
e.preventDefault();
if (
e.target.tagName === "IMG" ||
e.target.className === "original-link"
)
return;
isDragging = true;
startX = e.clientX;
startY = e.clientY;
selectionBox = document.createElement("div");
selectionBox.className = "selection-box";
selectionBox.style.left = `${startX}px`;
selectionBox.style.top = `${startY}px`;
document.body.appendChild(selectionBox);
});
document.addEventListener("mousemove", (e) => {
if (!isDragging) return;
const currentX = e.clientX;
const currentY = e.clientY;
const left = Math.min(startX, currentX);
const top = Math.min(startY, currentY);
const width = Math.abs(currentX - startX);
const height = Math.abs(currentY - startY);
selectionBox.style.left = `${left}px`;
selectionBox.style.top = `${top}px`;
selectionBox.style.width = `${width}px`;
selectionBox.style.height = `${height}px`;
images.forEach((img) => {
const imgRect = img.getBoundingClientRect();
const imgLeft = imgRect.left;
const imgTop = imgRect.top;
const imgRight = imgLeft + imgRect.width;
const imgBottom = imgTop + imgRect.height;
const isColliding = !(
imgRight < left ||
imgLeft > left + width ||
imgBottom < top ||
imgTop > top + height
);
if (isColliding) {
img.classList.toggle("selected");
}
});
});
document.addEventListener("mouseup", () => {
if (selectionBox) {
document.body.removeChild(selectionBox);
selectionBox = null;
}
isDragging = false;
});
logButton.addEventListener("click", () => {
const selectedImages = Array.from(images)
.filter((img) => img.classList.contains("selected"))
.map((img) => img.src);
console.log("选中的图片:", selectedImages);
});
function showModal(src) {
if (modal) return;
modal = document.createElement("div");
modal.className = "modal";
const modalImg = document.createElement("img");
modalImg.src = src;
modal.appendChild(modalImg);
document.body.appendChild(modal);
modal.addEventListener("click", (e) => {
if (e.target === modal) {
closeModal();
}
});
modal.addEventListener("wheel", (e) => {
e.preventDefault();
if (e.deltaY > 0) {
currentIndex = (currentIndex + 1) % imageSources.length;
} else if (e.deltaY < 0) {
currentIndex =
(currentIndex - 1 + imageSources.length) % imageSources.length;
}
modalImg.src = imageSources[currentIndex];
});
}
function closeModal() {
if (modal) {
document.body.removeChild(modal);
modal = null;
}
}
</script>
</body>
</html>