前言： 三部分代码Ctrl C + V，一定可以实现效果。
部分一： 页面设计 ( 注： 底部导航栏用到了阿里的字体图标)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="fonti/iconfont.css"> </head> <body> <!--页面主体--> <div id="all"> <!--页面头部--> <header> <button class="bt1" onclick="sortHandle('random')">随机</button> <button class="bt2" onclick="sortHandle('price')">价格</button> <button class="bt3" onclick="sortHandle('sales')">销量</button> </header> <!--页面主要内容--> <div id="main"> <!-- <ul class="bookshow"> <li><img src="imgtest/kris.jpg" alt=""></li> <li> <p>东野圭吾：七年守护</p> </li> <li> <font>(日)东野圭吾著：</font> </li> <li>价格：￥<span>29.5</span></li> <li> <font>销量:</font> <font>94</font> </li> </ul> --> </div> <!--页面底部--> <footer> <ul> <li class="iconfont"></li> <li class="iconfont"></li> <li class="iconfont"></li> <li class="iconfont"></li> </ul> </footer> </div> <script src="js/jquery-1.10.1.min.js"></script> <script src="js/myself.js"></script> </script> </body> </html>部分二： 样式部分main.css
/*通用部分*/ li { list-style: none; } /*页面主体*/ #all { width: 100%; height: 100%; display: flex; flex-wrap: wrap; overflow-y: visible; } /*页面头部*/ header { width: 100%; height: 8%; } header button { width: 80px; height: 30px; margin: 1% 0 0 1%; background-color: firebrick; color: white; border: none; border-radius: 5px; cursor: pointer; } /*页面主要内容区*/ #main { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 5%; } #main ul { width: 16%; margin-left: 1%; } #main ul li { width: 80%; } #main ul li img { width: 150px; } #main ul li p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; } #main ul li font { color: gray; font-size: 12px; } #main ul li:nth-child(2) { margin-top: -8%; } #main ul li:nth-child(3) { margin-top: -8%; } #main ul li:nth-child(4) { color: red; } /*页面底部*/ footer { width: 100%; height: 10%; position: fixed; bottom: 0px; background-color: white; } footer ul li { float: left; margin-left: 18%; font-size: 36px !important; cursor: pointer; }部分三： 逻辑实现，myself.js
//定义一个全局数组，用来存取我们从接口上获取的数据 var books = []; //用来标记按价格排序按钮的点击次数 var p = 0; //用来标记按销量排序的按钮的点击次数 var s = 0; //页面初始化，默认顺序加载显示数据。并将从接口获取到的数据赋值给数组 $(function () { $.getJSON("http://api.cat-shop.penkuoer.com/books.json", function (data) { books = data; initHtml(data); }); }); //基于sort()方法排序实现对应条件排序 function sortHandle(type) { switch (type) { //随机排序 case "random": //Math.random()随机取值是0-1； //Math.random() - 0.5的取值可能为正，也可能为负 books.sort(function (a, b) { $("#main").empty(); return Math.random() - 0.5; }); break; //按价格排序 case "price": //每点击一次，p自增一次 p++; $("#main").empty(); //点一次升序，再点一次降序（按价格排序同理） if (p % 2 == 0) { books.sort((a, b) => a.price - b.price); } else { books.sort((a, b) => b.price - a.price); } break; //按销量排序 case "sales": s++; $("#main").empty(); if (s % 2 == 0) { books.sort((a, b) => a.sales - b.sales); } else { books.sort((a, b) => b.sales - a.sales); } break; default: break; } initHtml(); } /*往页面添加数据 */ function initHtml() { var str = ""; books.forEach(function (book) { //以字符串模板的形式，遍历数组数据插入页面容器 str = ` <ul class="bookshow"> <li><img src="${book.img}" alt=""></li> <li> <p>${book.title}</p> </li> <li> <font>${book.author}</font> </li> <li>价格：￥<span>${book.price}</span></li> <li> <font>销量:</font> <font>${book.sales}</font> </li> </ul> `; $("#main").append(str); }); } ///底部选中效果：选项卡效果的话我就不写了.累了感觉不会再爱了♥ $("footer ul li").click(function () { $(this).css("color", "firebrick").siblings().css("color", ""); sortHandle("random"); });页面效果：
结语： 我觉得逻辑实现部分，代码注释已经很详细了，就没有撰写那么多的文字叙述。 如果还有疑惑，请联系我。WeChat：CHEN1070036402
