js 瀑布图实现框选功能

在JavaScript中实现瀑布流布局并包含框选功能，通常需要结合HTML、CSS和JavaScript。以下是一个简单的步骤说明：

1. HTML结构：首先创建一个容器，用于显示瀑布流图片。每个图片元素应该有唯一的ID或类名，方便后续操作。

<div id="waterfall">
  <img src="image1.jpg" class="item" data-index="0">
  <img src="image2.jpg" class="item" data-index="1">
  <!-- 添加更多图片 -->
</div>

2. CSS样式：设置瀑布流布局和鼠标悬停效果。你可以使用Flexbox或Grid布局来实现瀑布流，同时设置`.item`的`:hover`伪类来显示选择状态。

#waterfall {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: calc(33.33% - 20px); /* 根据实际布局调整 */
  margin-bottom: 20px;
  cursor: pointer; /* 显示手型，表示可以点击 */
}

.item:hover {
  border: 2px solid red; /* 鼠标悬停时的框选样式 */
}

3. JavaScript处理：使用事件监听器监听`.item`的`mousedown`和`mouseup`事件，记录鼠标的开始位置，并在`mousemove`时更新选择区域。

var selectedItems = [];
var startX, startY;

document.getElementById('waterfall').addEventListener('mousedown', function(e) {
  startX = e.clientX;
  startY = e.clientY;
});

document.getElementById('waterfall').addEventListener('mousemove', function(e) {
  var endX = e.clientX;
  var endY = e.clientY;

  // 计算选择区域
  var top = Math.min(startY, endY);
  var bottom = Math.max(startY, endY);
  var left = Math.min(startX, endX);
  var right = Math.max(startX, endX);

  // 更新所有处于选择区域内的图片的选中状态
  var itemsInArea = document.querySelectorAll('.item');
  for (let i = 0; i < itemsInArea.length; i++) {
    const itemRect = itemsInArea[i].getBoundingClientRect();
    if (itemRect.top <= bottom && itemRect.bottom >= top && itemRect.left <= right && itemRect.right >= left) {
      selectedItems.push(itemsInArea[i]);
      itemsInArea[i].classList.add('selected'); // 可以添加一个特定的class表示选中状态
    } else {
      itemsInArea[i].classList.remove('selected');
    }
  }
});

document.getElementById('waterfall').addEventListener('mouseup', function() {
  // 处理选中的图片操作，例如高亮展示、保存等
});