数组排序的一些应用实现

Posted 2020-08-03 懒懒喵

昨天看了一下有关数组的知识，想着找一些小实例来实现，奈何技术不到位，一个多小时才写出来了一个小应用，暂时没有测试兼容性问题，只兼容到了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操作时，不可复制事件。