JavaScript插入排序的方法

用 JavaScript 編寫插入排序算法時，可以按照以下方式實現(xiàn)：

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 函數(shù)接受一個數(shù)組作為參數(shù)，并使用插入排序算法對數(shù)組進行排序。

在每一次迭代中，將當前元素 current 與已排序部分的元素逐個比較，找到合適的位置插入。通過不斷地將元素后移來騰出插入位置，并將 current 放置在正確的位置上，最終得到有序序列。

在該示例中，初始數(shù)組 [7, 2, 4, 1, 5] 經(jīng)過插入排序后，得到有序序列 [1, 2, 4, 5, 7]。

、列表說明：列表是在頁面上有很多列同時存在的信息，分為無序列表和有序列表。

1、無序列表概念：用來放置一些對于順序無關緊要的內(nèi)容，例如下面的新聞內(nèi)容。

2、有序列表概念：有序列表用于存放內(nèi)容不能錯亂的信息，比如下面的阿里云內(nèi)容。

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>

前端對多個相同的標簽元素進行有序的排列是非常常見的需求，當我們有多個相似功能出現(xiàn)在同一個區(qū)域時我們就需要合理的排列這些元素。比如我這里的云服務提供了多個功能模塊展示給用戶，這個時候我們就會將每個模塊所涉及到的內(nèi)容打包成一個整體來設計。

HTML元素構(gòu)建

在Vue相似的功能展現(xiàn)我們可以通過v-for來實現(xiàn)，modulars中的數(shù)據(jù)我們口可以通過登錄直接從后臺獲取。這樣不管有多少個模塊我們都可以快速的實現(xiàn)DOM元素的渲染，也可以減少樣式的書寫，提高代碼執(zhí)行效率。這里每個mould都是一個功能模塊的組合，里面包含了標題、圖片、和功能描述等信息。

CSS樣式模型

元素排序主要是通過CSS樣式表來完成，我們都知道每個div盒子（class="mould"）的默認樣式屬性是獨占一行顯示，要想解決div獨占一行方法通常有兩種要么將該div設置浮動要么就設置display樣式。而父級的div高度通常由內(nèi)容撐開，寬度通常可以用父級容器的百分百進行設定。

float并排顯示

float可以定義元素的浮動屬性，使元素向左或向右移動來實現(xiàn)布局效果，常用來配合div標簽做網(wǎng)頁布局。float會使該元素脫離文檔流但仍然會占據(jù)位置（浮動元素會生成一個區(qū)域塊，不管是何種標簽元素都可以），其他相鄰的元素則會無視設置float屬性的元素緊跟其后繼續(xù)排列。如果對當前的所有元素設置浮動，那么就會當前的所有元素就會依次排列。所以利用float屬性可以實現(xiàn)并排顯示的效果，當然用完float浮動別忘了清除浮動。

overflow:hidden清除浮動

標簽元素通過float浮動后不屬于html文檔流，浮動之后的元素如果需要回到文檔流中就需要將前面的浮動清除。清除浮動有多種方式可以實現(xiàn)，最簡單的方式就是在父級使用overflow:hidden來清除浮動。"overflow:hidden"可以溢出隱藏，設置該屬性可以將內(nèi)容區(qū)域超出來的部分隱藏使內(nèi)容區(qū)域完全包含在該包含塊中。利用該屬性可以讓父元素包住這個脫離了文檔流的浮動元素，以達到清除包含塊內(nèi)子元素的浮動影響。

clear:both來清除浮動

當然也可以用clear:both來清除浮動，clear可以指定元素對象不允許有浮動。利用clear:both清除浮動可以把float的元素拽回文檔流，實現(xiàn)方法可以在浮動元素的尾部添加一個空的div標簽并設置 clear:both屬性或在下一個元素上加clear:both，可以可以在父級div定義創(chuàng)建偽元素:after設置clear:both屬性。

display并排顯示

display有兩種屬性情況分別是inline（同行顯示）和flex（彈性布局），display:inline屬性可以讓元素對象實現(xiàn)同行并排顯示（這個不是我們現(xiàn)在需要的效果）。display:flex是我們非常喜歡的的彈性布局方式，可以簡潔、快速的實現(xiàn)想要的彈性布局效果。定義了display:flex屬性之后可以通過 justify-content 屬性調(diào)整子元素的水平對齊方式，通過align-items屬性調(diào)整子元素的垂直對齊方式。當父元素寬度不夠時flex默認會等比例壓縮（不會自動換行），這時候我們需要通過設置 flex-wrap屬性（默認為 nowrap，這里指定wrap）來使其換行即可。