Js利用sort方法实现图片的正 ,倒序和随机排序

最新推荐文章于 2024-06-14 10:27:31 发布

Camille7N

最新推荐文章于 2024-06-14 10:27:31 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/weixin_42160265/article/details/80614636

版权

本文展示了如何使用JavaScript的sort方法来实现图片的正序、倒序和随机排序。通过点击按钮，可以改变图片的显示顺序，代码中包括了图片URL和对应标题的数据结构，并且提供了详细的排序逻辑。

摘要由CSDN通过智能技术生成

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul,li,p{padding: 0;margin: 0;}
ul,li{list-style: none;}
#box{width: 1000px;height: 600px;border: 1px solid #000;margin: 50px auto;text-align: center;position: relative;}
input{ margin-top: 30px; width: 100px; height: 30px;line-height: 30px; border: 1px solid #ccc;background: #009999;color: #fff;outline: none;}
ul{width: 1000px; height: 500px;top: 100px;position: absolute;background: #fff;}
ul li{width: 240px; height: 250px;float: left;padding: 0 5px 10px 5px;}
ul li img{width: 240px;height: 200px;vertical-align: top;}
p{background: #ccc;height: 30px; line-height: 30px; color: #006598;font-weight: bold;}
</style>

</head>
<body>
<div id="box">
<input type="button" value="从大到小" />