数组排序的一些应用实现

Posted 懒懒喵

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了数组排序的一些应用实现相关的知识,希望对你有一定的参考价值。

昨天看了一下有关数组的知识,想着找一些小实例来实现,奈何技术不到位,一个多小时才写出来了一个小应用,暂时没有测试兼容性问题,只兼容到了IE9

练习很简单,主要是通过按钮点击实现图片排序问题,如下:

 

一、布局方式:

我是在ul下将每张图片放在li中,文字描述采用p标签,同时给每个li添加一个左浮动(关于浮动,后面的排序问题上不是很理解)

二、js实现

1、由于涉及到排序问题,因此我们自然而然的可以想到数组的解决方式,因为数组对象封装了一些排序方法供我们使用

但是我们获取的ul下的li是一个标签节点的集合,为htmlCollection,因此要将标签转为数组

方法为:

arr=Array.prototype.slice.apply(oLi);

但是在IE8下测试时提示this不是一个javascript对象,,,,待理解

问题解决:IE8模式下默认获取的对象为com对象,不是dom对象

解决方法为强制将获取的对象转换为数组对象

Array.prototype.concat.apply([],oLi).slice()

 

此时就得到了一个内部元素为li的数组集合,

在此就可以对得到的节点数组进行排序,,

实现过程:

A)开始没有添加打乱顺序事件的时候,只将每次点击事件实现数组的反转然后再循环插入到ul中,可以实现顺序排序

但是当加入打乱顺序事件后,li乱序再进行排序便出现了问题

B)解决方法,给每个li添加了一个index标记,标记等于最初时li的位置

顺序排序时添加一个sort中的比较事件

 

注:最初不理解地方,当我执行

ul.appendChild(li[0])

之后,第一张图片会跑到最后面的地方,图片顺序依次为2-3-4-5-6-7-8-1

原因:li原味dom树中的节点,执行上面代码会将li从dom树中最初位置移动到最后位置,如果想要再后面再继续插入li,要对

li节点进行clone操作,原来dom树中没有的节点被执行插入操作会直接插入到最后,而如果原来就是dom树中的一员,则会

从原来位置移动到最后,,,但对节点进行clone操作时,不可复制事件。

 

以上是关于数组排序的一些应用实现的主要内容,如果未能解决你的问题,请参考以下文章

iOS小技能:对象数组按照日期分组和排序,使用块代码实现数组排序和乱序。

iOS小技能:对象数组按照日期分组和排序,使用块代码实现数组排序和乱序。

markdown 数组排序片段

计数排序及其时间复杂度代码(C++实现)应用场景

堆的一些简单应用

归并排序:步骤讲解与代码实现