用CSS写一个可用的冒泡排序算法
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
想象在一场面试中，面试官问你“你能实现冒泡排序吗？”，而你的回答是“当然可以，你要我用 JavaScript 实现还是 CSS？”
这多酷啊！
我知道你现在在想：“没有面试官会因为我做了一个模拟冒泡排序的动画而感到印象深刻”，你是对的！
但如果我们真的能用 CSS 写一个可用的冒泡排序算法，并且将其可视化展示，那就很不一样了！
下面我们就来看看如何实现。
Demo
使用方法：:root 选择器下有五个值
:root {
--val1: 12;
--val2: 16;
--val3: 9;
--val4: 14;
--val5: 7;
}它们对应了我们要排序的数组。上面的五个值代表了 [12, 16, 9, 14, 7]。
你可以改变这些数字（0 到 20 之间的任意值），然后点击“运行”，程序就会自动为你完成排序。
注意：在手机上最后的几下动画可能不会展示并出现页面白屏，在电脑上你的风扇可能会响起来。
这是使用大量依赖于前置结果的计算带来的后果，我不确定这样会不会用尽内存，但我在这个项目中确实突破了 CSS 的极限！
总之，听完这些警告之后，你就可以试一试了（由于动画只播放一次，你可以点击“运行”按钮来再次运行动画）！
代码解释
听着，这段代码实际上很傻，所以我不打算做完整的讲解，但代码中有几个地方很有趣：
获取 v2 > v1 的布尔值结果
--is-1-greater-2-step-1: Min(1, Max(var(--arr1s0) - var(--arr2s0), 0));
这看起来很复杂，但实际上并不，这段代码做了下面这几件事：
- 用数组第一位的值减去第二位的值。（为方便起见，我们称之为 "diff1and2"）。
- 求出 "diff1and2" 和 0 的最大值。我们这样做是希望: "如果 1 大于 2，我们会得到一个正值，但如果 2 大于 1，我们会得到 0"。我们把这个结果称为 "OneGreaterOrZero"。
- 然后，我们取 "OneGreaterOrZero"，并使用
Min来确保它不大于 1。因此，如果 "OneGreaterOrZero" 是 6，我们将把它减为 1，但如果是 0，我们将返回 0。
还是感觉很困惑？这里是等价的 JS 代码：
let pos1 = 7; let pos2 = 15; let diff1and2 = pos1 - pos2; // 如果 diff1and2 是负数，下一步会把它变成 0 let OneGreaterOrZero = Math.max(diff1and2, 0); let result = Math.min(1, OneGreaterOrZero); console.log(diff1and2, OneGreaterOrZero, result); // result 总是 0 或 1，分别代表 false / true
交换数组位置
那么我们怎么交换数组中的元素位置呢？
为了实现冒泡排序，我们需要在第一个值大于第二个值时交换两个值。
我们没法像在 JS 中一样使用中间变量这样的魔法。但下面这段代码可以帮我们实现：
--arr1s1: calc(
var(--is-2-greater-1-step-1) * var(--arr1s0) + var(--is-1-greater-2-step-1) *
var(--arr2s0)
);
--arr2s1: calc(
var(--is-1-greater-2-step-1) * var(--arr1s0) + var(--is-2-greater-1-step-1) *
var(--arr2s0)
);这段代码看起来也非常复杂，但它实际上非常简单。
在刚刚的“函数”中，我们得到了一个代表 1 和 2 之间大小关系的布尔值，所以我们在这里可以得到 1 或者 0。
我们也可以很简单地获得其反转值：
--is-2-greater-1-step-1: (1 - var(--is-1-greater-2-step-1));
这段代码的美妙之处在于我们可以使用下面的技巧：
// 假设这是我们要排序的数组 origArray = [7, 2]; // 我们运行刚刚的两个函数得到下面两个变量 oneIsGreater = 1; twoIsGreater = 0; // 我们现在可以把这两个值乘在一起。 如果 [2] 更大的话我们还是返回原始值. 但如果 [1] 比 [2] 大的话我们就交换它们的值。 newArray[0] = twoIsGreater * origArray[0] + oneIsGreater * origArray[1]; newArray[1] = oneIsGreater * origArray[0] + twoIsGreater * origArray[1]; // 这等价于 newArray[0] = 0 * 7 + 1 * 2; //2 newArray[1] = 1 * 7 + 0 * 2; //7
如果将 oneIsGreater 和 twoIsGreater 互换，则我们得到仍是原来的值！
origArray = [7, 2]; oneIsGreater = 0; twoIsGreater = 1; // 一样的“函数” newArray[0] = twoIsGreater * origArray[0] + oneIsGreater * origArray[1]; newArray[1] = oneIsGreater * origArray[0] + twoIsGreater * origArray[1]; // 等价于： newArray[0] = 1 * 7 + 0 * 2; //7 newArray[1] = 0 * 7 + 1 * 2; //2
这就是我们进行冒泡排序所需的全部功能！
之所以我写了一大堆 CSS 代码，是因为我们在 CSS 中（暂时）还无法使用循环。所以我们必须手动地写出冒泡排序中的每一步交换：
- 检查第 1 个数和第 2 个数，如果需要交换则交换位置
- 检查第 2 个数和第 3 个数，如果需要交换则交换位置
- 检查第 3 个数和第 4 个数，如果需要交换则交换位置
- 检查第 4 个数和第 5 个数，如果需要交换则交换位置
- 检查第 1 个数和第 2 个数，如果需要交换则交换位置
- 检查第 2 个数和第 3 个数，如果需要交换则交换位置
- 检查第 3 个数和第 4 个数，如果需要交换则交换位置
- 检查第 1 个数和第 2 个数，如果需要交换则交换位置
- 检查第 2 个数和第 3 个数，如果需要交换则交换位置
- 检查第 1 个数和第 2 个数，如果需要交换则交换位置
就这些了！
正如我所说的，这篇文章并不是一篇完整的教程。但我确实想介绍这些有趣的用 CSS 实现的 "开关" 和 "布尔值"，它们可能会在未来你遇到的的某些奇怪场景中派上用场！
以上就是用CSS写一个可用的冒泡排序算法的详细内容，更多关于CSS冒泡排序的资料请关注程序员之家其它相关文章！
相关文章
- CSS 的specificity是一个衡量CSS值优先级的一个标准，具有一套相关的判定规定及计算方式，下面为大家详细介绍下2014-05-29
css table-layout属性显示表格单元格、行、列的算法规则
之所以拿出这个来说事，是因为看到一篇文章Tips for Authoring Fast-loading HTML Pages，提到了table-layout,本文详细介绍tableLayout 属性算法规则，需要了解的朋友可以2012-12-12
实现打字机效果的关键是两个动画效果，文字出现的动画，和光标闪烁出现的动画,本文小编给大家介绍了如何使用CSS实现打字机效果，文章通过代码示例介绍的非常详细,需要的朋2023-10-23
项目需要开发一个仿医疗证书类的一个小卡片，用于模拟展示不同种类的证书信息，证书标题与左右并列的布局结构较好解决，但是根据文本块宽度，让里面的内容文字间距自适应，2023-10-20
最近大家刷抖音，是否有刷到拉斯维加斯的新地标 「Sphere」，场馆内部的视觉效果非常惊人，我的第一想法就是，这个看起来用 CSS 也可以实现嘛？还有 CSS 不能实现的？本文2023-10-20
CSS中的float属性是布局中经常会用到的一个属性，它可以让元素浮动到其他元素的左、右或中间位置，本文给大家介绍CSS中float用法，感兴趣的朋友一起看看吧2023-10-18
要在文本中实现渐变色效果，我们可以使用CSS中的background-clip属性和CSS渐变来实现,本文给大家分享一个代码示例，展示如何创建文本渐变色效果，感兴趣的同学可以自己动手2023-10-16
这篇文章给大家介绍了如何使用CSS实现渐变圆角边框的效果，有没有发现在现如今的网站应用中，我们大量的使用到这类场景,在解决这类问题时，我们利用了css的mask与mask-comp2023-10-12
无限滚动效果是一种常见的网页交互方式，可以提供更好的用户体验,本文将介绍如何使用 CSS 实现一个简单的无限滚动效果，并提供详细的代码示例,,需要的朋友可以参考下2023-10-11
通过CSS的动画属性animation可以实现音频播放时的动画效果，同时配合JS操作动画的animation-play-state属性，来控制动画的暂停和播放，本文重点介绍CSS实现音频播放时柱状2023-10-10
最新评论