JavaScript插入排序的方法

用 JavaScript 编写插入排序算法时，可以按照以下方式实现：

function insertionSort(arr) {
  const length = arr.length;

  for (let i = 1; i < length; i++) {
    const current = arr[i];
    let j = i - 1;

    while (j >= 0 && arr[j] > current) {
      arr[j + 1] = arr[j];
      j--;
    }

    arr[j + 1] = current;
  }

  return arr;
}

// 示例用法
const array = [7, 2, 4, 1, 5];
const sortedArray = insertionSort(array);
console.log(sortedArray); // 输出: [1, 2, 4, 5, 7]

在这个示例中，insertionSort 函数接受一个数组作为参数，并使用插入排序算法对数组进行排序。

在每一次迭代中，将当前元素 current 与已排序部分的元素逐个比较，找到合适的位置插入。通过不断地将元素后移来腾出插入位置，并将 current 放置在正确的位置上，最终得到有序序列。

在该示例中，初始数组 [7, 2, 4, 1, 5] 经过插入排序后，得到有序序列 [1, 2, 4, 5, 7]。

、列表说明：列表是在页面上有很多列同时存在的信息，分为无序列表和有序列表。

1、无序列表概念：用来放置一些对于顺序无关紧要的内容，例如下面的新闻内容。

2、有序列表概念：有序列表用于存放内容不能错乱的信息，比如下面的阿里云内容。

3、自定义列表：自定义列表用于正文之外的框框栏栏之类的。

二、列表样式：

列表样式2

列表样式3

三、无序列表 <ul> </ul> 和 <li> </li>标签

列表标签是用 ul 表示，但是不是单独使用的，需要和 li 标签配合使用，并且列表标签也有属性，用法：

<ul type="disc"> ，属性有多个值：

disc ：小圆点，默认属性

circle ：小圆圈

square ：实心方块

none ：不要任何符号

源码：↓

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<li>这是列表a</li>

<li>这是列表b</li>

<li>这是列表c</li>

</ul>

</body>

前端对多个相同的标签元素进行有序的排列是非常常见的需求，当我们有多个相似功能出现在同一个区域时我们就需要合理的排列这些元素。比如我这里的云服务提供了多个功能模块展示给用户，这个时候我们就会将每个模块所涉及到的内容打包成一个整体来设计。

HTML元素构建

在Vue相似的功能展现我们可以通过v-for来实现，modulars中的数据我们口可以通过登录直接从后台获取。这样不管有多少个模块我们都可以快速的实现DOM元素的渲染，也可以减少样式的书写，提高代码执行效率。这里每个mould都是一个功能模块的组合，里面包含了标题、图片、和功能描述等信息。

CSS样式模型

元素排序主要是通过CSS样式表来完成，我们都知道每个div盒子（class="mould"）的默认样式属性是独占一行显示，要想解决div独占一行方法通常有两种要么将该div设置浮动要么就设置display样式。而父级的div高度通常由内容撑开，宽度通常可以用父级容器的百分百进行设定。

float并排显示

float可以定义元素的浮动属性，使元素向左或向右移动来实现布局效果，常用来配合div标签做网页布局。float会使该元素脱离文档流但仍然会占据位置（浮动元素会生成一个区域块，不管是何种标签元素都可以），其他相邻的元素则会无视设置float属性的元素紧跟其后继续排列。如果对当前的所有元素设置浮动，那么就会当前的所有元素就会依次排列。所以利用float属性可以实现并排显示的效果，当然用完float浮动别忘了清除浮动。

overflow:hidden清除浮动

标签元素通过float浮动后不属于html文档流，浮动之后的元素如果需要回到文档流中就需要将前面的浮动清除。清除浮动有多种方式可以实现，最简单的方式就是在父级使用overflow:hidden来清除浮动。"overflow:hidden"可以溢出隐藏，设置该属性可以将内容区域超出来的部分隐藏使内容区域完全包含在该包含块中。利用该属性可以让父元素包住这个脱离了文档流的浮动元素，以达到清除包含块内子元素的浮动影响。

clear:both来清除浮动

当然也可以用clear:both来清除浮动，clear可以指定元素对象不允许有浮动。利用clear:both清除浮动可以把float的元素拽回文档流，实现方法可以在浮动元素的尾部添加一个空的div标签并设置 clear:both属性或在下一个元素上加clear:both，可以可以在父级div定义创建伪元素:after设置clear:both属性。

display并排显示

display有两种属性情况分别是inline（同行显示）和flex（弹性布局），display:inline属性可以让元素对象实现同行并排显示（这个不是我们现在需要的效果）。display:flex是我们非常喜欢的的弹性布局方式，可以简洁、快速的实现想要的弹性布局效果。定义了display:flex属性之后可以通过 justify-content 属性调整子元素的水平对齐方式，通过align-items属性调整子元素的垂直对齐方式。当父元素宽度不够时flex默认会等比例压缩（不会自动换行），这时候我们需要通过设置 flex-wrap属性（默认为 nowrap，这里指定wrap）来使其换行即可。