原生js实现商品排序功能实现界面如下：分析其事件源，只有三个按钮；给每个按钮实现三种不同的排序方式，一般也有很多种方式；

实现界面如下：

分析其事件源，只有三个按钮；给每个按钮实现三种不同的排序方式，一般也有很多种方式；此案例实现三种方式用一个函数封装，相对来说比较简单易懂；代码如下： html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>给花花们排序</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="box">
        <ul class="clearfix">
            <li>
                <img src="images/1.jpg" alt="粉色花"/>
                <p>
                    <span class="flowers">粉色花</span>
                    <span>¥<i class="price">18</i></span>
                </p>
            </li>
            <li>
                <img src="images/2.jpg" alt="小红花"/>
                <p>
                    <span class="flowers">小红花</span>
                    <span>¥<i class="price">30</i></span>
                </p>
            </li>
            <li>
                <img src="images/3.jpg" alt="白格桑花"/>
                <p>
                    <span class="flowers">白格桑花</span>
                    <span>¥<i class="price">45</i></span>
                </p>
            </li>
            <li>
                <img src="images/4.jpg" alt="荷花"/>
                <p>
                    <span class="flowers">荷花</span>
                    <span>¥<i class="price">28</i></span>
                </p>
            </li>
            <li>
                <img src="images/5.jpg" alt="格桑花"/>
                <p>
                    <span class="flowers">格桑花</span>
                    <span>¥<i class="price">15</i></span>
                </p>
            </li>
            <li>
                <img src="images/6.jpg" alt="七星彩花"/>
                <p>
                    <span class="flowers">七彩花</span>
                    <span>¥<i class="price">48</i></span>
                </p>
            </li>
            <li>
                <img src="images/7.jpg" alt="月季花"/>
                <p>
                    <span class="flowers">月季花</span>
                    <span>¥<i class="price">82</i></span>
                </p>
            </li>
            <li>
                <img src="images/8.jpg" alt="睡莲"/>
                <p>
                    <span class="flowers">睡莲</span>
                    <span>¥<i class="price">80</i></span>
                </p>
            </li>
        </ul>
        <div class="btn clearfix">
            <button>从高到低</button>
            <button>从低到高</button>
            <button>随机排序</button>
        </div>
    </div> 
    <script src="js/index.js"></script>
</body>
</html>

css代码：

*{
    margin: 0;
    padding: 0;
}
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
.box{
    width:960px;
    padding:30px 30px;
    margin:40px auto;
}
ul{
    list-style: none;
    width: 100%;
    margin:0px;
    border:1px solid #bbb;
    padding:20px;
}
ul li{
    float: left;
    width:220px;
    height: 200px;
    margin:0 10px 35px;
}
ul li img{
    width:220px;
    height:200px;
}
ul li p{
    font-size:16px;
}
ul li p span:nth-child(2){
    float:right;
}
ul li i{
    color:red;
    font-size:20px;
    font-style:normal;
}
/* .box .btn{
    width:200px;
    height:60px;
    float:right;
} */
.box .btn button{
    float:right;
    width:80px;
    height: 30px;
    line-height:30px;
    background: #bbb;
}

js代码：

var oBtn = document.getElementsByTagName('button');
var li = document.querySelectorAll('li'); 
var len = li.length;
var Mo = document.getElementsByTagName('i');
var arr1=[];
var temp = 0;

for(var i=0;i<len;i++){
    arr1[i] = parseFloat(Mo[i].innerHTML);
}
function SortArr(arr,flag){
    for(var i = 0;i<arr.length-1;i++){
        for(var j=0;j<arr.length-1-i;j++){
            flag=(flag == 1) || (flag == -1)?flag:(Math.random()-0.5);
            if(arr[j]*flag>arr[j+1]*flag){
                temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;

                temp = li[j].innerHTML;
                li[j].innerHTML = li[j+1].innerHTML;
                li[j+1].innerHTML = temp;
            }
        }
    } 
    return arr;
}
oBtn[2].onclick= function(){
    arr = SortArr(arr1,Math.ceil(Math.random()*10));//这里可以传随机值或者不传值，因为默认是随机的
    console.log(arr);
}
oBtn[1].onclick= function(){
    arr = SortArr(arr1,1);
    console.log(arr);
}
oBtn[0].onclick= function(){
    arr = SortArr(arr1,-1);
    console.log(arr);
}

利用函数传参方式实现三种模式，是不是很简单呢？