Rumah > hujung hadapan web > html tutorial > bubble sorting visually_html/css_WEB-ITnose

bubble sorting visually_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:22:31
asal
1120 orang telah melayarinya

我觉得这个是整个应用的难点。

看了 visual.net,他的实现是利用 CSS3 的 transform函数里面的 translate。这似乎是不错的想法,但是我发现要用 JS 获取 translate对应的值的话, 有点麻烦。

接着,我又看了一个答案的实现。他的方法是利用 CSS 中的 left。而 left的值是相对于设定了 position: relative的 parent。

我不是很懂上面的方法。但是我想到了另一个方法: left是相对于他本身 。也就是设置他本身为 position: relative而不是他的 parent。

.bar { position: relative; left: 0; /* must set, or not transition when value in falsy */ /*transition: left 1s;*/}
Salin selepas log masuk

我之所以设置 left为 0,是因为我们要用 CSS3 的 transition实现渐变的效果。

然后,每次交换的时候,我们只需要把他当前的 left加/减 柱形图的宽度。没错,这就是这种方法的「缺点」之一,我们需要用 JS 写死柱形图的宽度。

swap () {  // ...  const getLeft = item =>    parseInt(item.style.left.slice(0, -2)) || 0 // rm 'px'  item1.style.left = `${this.barWidth + getLeft(item1)}px`  item2.style.left = `${-this.barWidth + getLeft(item2)}px`}
Salin selepas log masuk

在交换的时候,我们要先找到对应的 DOM 元素,也就是上面代码中的 item和 item2。

怎么找?(假设我们排序的是一堆数字)一开始我想到了两种方法。

第一种是,根据数字,找到具有对用数字的 DOM 元素,就像这样:

swap (value1, value2) {  const item1 = this.el.querySelector(`[data-value='${value1}']`)}
Salin selepas log masuk

但这种方法是行不通的。为什么?

因为当有多个数字相同的时候,我们找到的 DOM 元素不一定是我们想要交换的。因为 querySelector返回的总是第一个匹配的元素。

那我们在 item1后面才开始找 item2行不行?使用 CSS3 的 ~选择器。比如这样:

swap (value1, value2) {  const item1 = this.el.querySelector(`[data-value='${value1}']`)  const item2 = this.el.querySelector(`[data-value='${value2}'] ~ data-value='${value2}']`)}
Salin selepas log masuk

这种方法有时可以,有时是不可以的。为什么?

因为我们的 DOM 结构根本就没有变化,只是用 CSS 的 left在视觉上改变了位置而已。

因此,我们的第二种方法当然就是在交换的时候,不仅改变 left的值,而且交换 DOM 的位置。

function swapDOM(element1, element2) {  element1.parentNode.insertBefore(element2, element1);}
Salin selepas log masuk

但是,这种方法还是行不通的。因为 insertBefore会把 element2从 DOM 中删掉。这样的话,就没有了「交换」的渐变效果。

果然,我们还是不能 DOM 元素。那么只能返回第一种方法。

这个时候我突然想到了 React 中循环的时候需要写上 key属性。然后。。。然后只要把 key和 数字绑定在一起,查找数字对应的 DOM 元素只需要使用 key就行。

// data = [64, 39, 78, 36]this.items = data.map((d, i) => ({key: `key-${i}`, value: d}))swap (key1, key2) {  const item1 = this.el.querySelector(`[data-key='${key1}']`)}
Salin selepas log masuk

终于搞定了「交换」动画了,不知道有没有更好的实现方法呢?

为什么我的「交换」动画一瞬间就跑完了

假设我们的排序算法是这样的:

sort () {  const items = this.items  for (let i = 0; i < items.length; i++) {    for (let j = 0; j < items.length - i - 1; j++) {      const item1 = items[j]      const item2 = items[j + 1]      if (less(item2.value, item1.value)) {        swap(j, j + 1, items)      }    }  }  return this.items}
Salin selepas log masuk

注意到,我们的 swap函数是在 for循环里面调用的,这是没错的。

然而我们的「交换」动画就跑完了,根本没有渐变的效果,我们想要的是等到前一个交换动画完成后,下一个才发生。为什么会这样?因为我们的两个 for是瞬间就可以跑完的= =

怎么解决这个问题呢? setInterval?好像会把排序算法的逻辑扰乱。

突然,我想到了 jQuery 好像有个动画队列的东西。

也就是说, 我们可以把所有的动画先放在一个队列里面。然后再一个一个地出队,一个一个地调用。

for () {  for () {    if (less(item2.value, item1.value)) {      this.queue.push(() => this.swap(item1.key, item2.key))    }  }}play () {  const intervalId = setInterval(() => {    if (this.queue.length === 0) {      clearInterval(intervalId)    } else {      const swap = this.queue.shift()      swap()    }  }, 2 * 1000)}
Salin selepas log masuk

看了知乎上的答案,这个问题还有其他实现的方法。 总的来说,就是如何解决异步编程问题。

Tips

可以利用 CSS 的 伪元素 ::before以及 attr函数,来实现柱形图上显示对应的数字。

.bar::before { content: attr(data-value); position: absolute; top: -16px; color: #233;}
Salin selepas log masuk

Continue

我们的代码还可以继续优化,比如接口如何设计,使得可以扩展于其他的排序算法。还有用户体验,比如,排序前中后状态的颜色都设为不同,等等。

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan