滑动窗口<==>java

滑动窗口算法:解决字符串问题的高效技巧

滑动窗口(Sliding Window)是一种用于解决字符串或数组相关问题的算法技巧。它通过维护一个窗口,该窗口在数据结构上可以是一个固定大小的窗口或可变大小的窗口,然后在数据结构中滑动窗口的起始位置或结束位置来解决问题。

滑动窗口算法通常适用于以下类型的问题:

  1. 子串或子数组问题:找到最长的连续子串或子数组,使其满足某种条件。
  2. 字符或数字的频率问题:统计在给定窗口范围内字符或数字的出现频率或数量。

滑动窗口算法的核心思想是通过调整窗口的起始位置和结束位置,来有效地缩小问题的搜索空间。它通过移动窗口的方式,每次处理一个新的元素或字符,以获得所需的结果。

具体步骤如下:

  1. 初始化窗口的起始位置和结束位置。
  2. 开始遍历字符串或数组,并根据问题要求进行相应的操作。
  3. 当满足窗口的某种条件时,更新结果或记录信息。
  4. 移动窗口的起始位置或结束位置,以调整窗口大小。
  5. 重复步骤2到4,直到遍历完整个字符串或数组。

滑动窗口算法常常可以在O(n)的时间复杂度内解决问题,因为每个元素或字符至多被处理两次(进入窗口和离开窗口),而不需要对每个元素进行全局搜索。

滑动窗口是一种高效且常用的算法技巧,可以应用于多种问题中,特别适用于子串或子数组问题以及频率统计问题。

例如:较为经典的一道算法题目:

给定一个字符串 s ,请你找出其中不含有重复字符的 最长子串 的长度。

JAVA代码实现:

import java.util.HashMap;

class Solution {
    public int lengthOfLongestSubstring(String s) {
        int n = s.length();
        int maxLen = 0;
        int start = 0;
        HashMap<Character, Integer> map = new HashMap<>();
        
        for (int end = 0; end < n; end++) {
            char c = s.charAt(end);
            if (map.containsKey(c) && map.get(c) >= start) {
                start = map.get(c) + 1;
            }
            map.put(c, end);
            maxLen = Math.max(maxLen, end - start + 1);
        }
        
        return maxLen;
    }
}

<think>我们使用原生JavaScript和CSS来实现一个响应式的卡片容器。要求如下: 1. 当卡片数量超过4个时,显示左右滑动按钮,并支持点击按钮滑动卡片。 2. 当卡片数量小于等于4个时,卡片居中显示,不显示滑动按钮。 思路: - 使用CSS Flex布局来排列卡片,并设置容器为可滚动(当卡片数量多时)。 - 通过JavaScript动态检查卡片数量,并根据数量决定是否显示滑动按钮以及是否居中。 - 滑动按钮点击时,通过改变卡片的滚动位置来实现滑动效果。 步骤: 1. HTML结构:包含一个外部容器(用于整体布局),内部包含左右滑动按钮(初始隐藏)和一个卡片容器(用于放置卡片)。 2. CSS样式: - 外部容器:相对定位,设置合适的宽度,并隐藏溢出内容。 - 卡片容器:使用Flex布局,允许水平滚动(当卡片数量多时),并取消Flex的换行。 - 卡片:设置固定宽度和高度,并设置flex-shrink:0防止卡片被压缩。 - 当卡片数量小于等于4个时,通过CSS使卡片容器居中(justify-content: center),此时隐藏滚动条(overflow: hidden)。 - 当卡片数量超过4个时,卡片容器允许水平滚动(overflow-x: auto),并显示左右滑动按钮。 3. JavaScript逻辑: - 页面加载后,获取卡片容器和所有卡片元素,以及左右按钮。 - 计算卡片数量,如果数量大于4,则显示左右按钮,否则隐藏按钮并设置卡片容器居中。 - 为左右按钮添加点击事件,点击时让卡片容器水平滚动一定距离(例如,每次滚动一个卡片的宽度加上间距)。 注意:由于卡片容器在数量小于等于4时是居中且不可滚动的,所以我们需要通过JS动态切换样式类。 实现细节: 为了避免在滚动时出现滚动条,我们可以在卡片容器上设置一个自定义的滚动条样式(例如隐藏默认滚动条,使用自定义按钮控制),但题目要求使用原生JS和CSS,且要求显示左右按钮。 另外,我们需要考虑卡片之间的间距。 下面是一个示例代码: 首先,在JSP页面中,我们构建HTML结构:</think>我将指导您在JSP页面中使用原生JavaScript和CSS实现响应式卡片滑动功能。以下是完整的解决方案: ### 实现思路 1. **CSS布局**:使用Flexbox实现响应式布局 2. **JavaScript逻辑**: - 动态检测卡片数量 - 切换居中/滑动模式 - 实现滑动按钮功能 3. **响应式处理**:适配不同屏幕尺寸 ### 代码实现 ```html <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>响应式卡片滑动</title> <style> /* 基础样式 */ .card-container { display: flex; overflow-x: hidden; position: relative; max-width: 1200px; margin: 0 auto; } .card-wrapper { display: flex; transition: transform 0.3s ease; gap: 20px; padding: 10px 0; } .card { flex: 0 0 calc(25% - 20px); /* 每行4个卡片 */ min-width: 250px; background: #f5f5f5; border-radius: 8px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } /* 滑动按钮样式 */ .slide-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.6); color: white; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: none; /* 默认隐藏 */ z-index: 10; } .prev-btn { left: 10px; } .next-btn { right: 10px; } /* 居中显示时的样式 */ .center-mode .card-wrapper { justify-content: center; width: 100%; } </style> </head> <body> <div class="card-container"> <button class="slide-btn prev-btn">❮</button> <div class="card-wrapper" id="cardWrapper"> <!-- 卡片内容 - JSP动态生成 --> <c:forEach items="${cards}" var="card"> <div class="card">${card.content}</div> </c:forEach> </div> <button class="slide-btn next-btn">❯</button> </div> <script> // 初始化变量 const cardWrapper = document.getElementById('cardWrapper'); const prevBtn = document.querySelector('.prev-btn'); const nextBtn = document.querySelector('.next-btn'); const cardContainer = document.querySelector('.card-container'); const cards = cardWrapper.querySelectorAll('.card'); // 卡片宽度计算(包含间距) const cardWidth = cards[0] ? cards[0].offsetWidth + 20 : 0; // 20px为间隙 // 检测卡片数量并更新布局 function updateLayout() { if (cards.length <= 4) { // 居中模式 cardContainer.classList.add('center-mode'); prevBtn.style.display = 'none'; nextBtn.style.display = 'none'; } else { // 滑动模式 cardContainer.classList.remove('center-mode'); prevBtn.style.display = 'block'; nextBtn.style.display = 'block'; } } // 滑动功能 prevBtn.addEventListener('click', () => { cardWrapper.scrollBy({ left: -cardWidth * 4, // 每次滑动4个卡片 behavior: 'smooth' }); }); nextBtn.addEventListener('click', () => { cardWrapper.scrollBy({ left: cardWidth * 4, // 每次滑动4个卡片 behavior: 'smooth' }); }); // 初始检测 window.addEventListener('DOMContentLoaded', updateLayout); window.addEventListener('resize', updateLayout); // 响应窗口大小变化 </script> </body> </html> ``` ### 关键功能说明 1. **自动布局切换**: - 卡片 ≤ 4:居中显示,隐藏按钮 - 卡片 > 4:显示滑动按钮 - 使用`updateLayout()`函数动态检测 2. **滑动机制**: - 每次点击滑动4个卡片宽度 - 平滑滚动效果:`behavior: 'smooth'` - 精确计算卡片宽度(包含间距) 3. **响应式处理**: - 窗口大小变化时重新计算布局 - 使用Flexbox适配不同屏幕 - 卡片宽度:`calc(25% - 20px)`确保每行4个 ### 优化建议 1. **触摸屏支持**:添加`touchstart`/`touchmove`事件实现移动端滑动 2. **无限循环**:当到达末尾时自动跳转回第一张卡片 3. **自适应间距**:使用CSS变量动态调整间隙大小 4. **性能优化**:添加`requestAnimationFrame`优化滑动动画[^1] ### 实现要点 - 使用Flexbox的`justify-content: center`实现居中 - 通过`scrollBy`实现精确滑动控制 - CSS过渡效果增强用户体验 - 动态显示/隐藏按钮避免界面混乱 此解决方案完全使用原生JavaScript和CSS实现,无需任何外部库,可直接集成到JSP页面中。当卡片数量变化时,系统会自动调整布局模式。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值