CSS 完美排序10000条数据li

最新推荐文章于 2023-01-09 14:33:05 发布

原创盗版

最新推荐文章于 2023-01-09 14:33:05 发布

阅读量1k

点赞数

分类专栏： web开发学习

web开发学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

看到一道面试题：<ul>有 10000 个<li>子元素，如何将这 10000 个<li>颠倒顺序。
-------------
要求是效率尽量要高。不光是算法效率，还要考虑DOM元素操作的效率。大家有什么想法？
还有就是遇到类似这种问题解题技巧？
-------------
答：以下利用了css3旋转属性，将li翻转，同时再ul翻转。完美的倒排！

http://lax.v2ex.com/t/100982 出自5楼

实现代码：

<!DOCTYPE html>
<html>
<head>
	<title>测试</title>
	<style>
		/*
		看到一道面试题：<ul>有 10000 个<li>子元素，如何将这 10000 个<li>颠倒顺序。
		-------------
		要求是效率尽量要高。不光是算法效率，还要考虑DOM元素操作的效率。大家有什么想法？
		还有就是遇到类似这种问题解题技巧？
		-------------
		答：以下利用了css3旋转属性，将li翻转，同时再ul翻转。完美的倒排！
		*/
		ul,li{
			transform: rotate(180deg);
			-ms-transform: rotate(180deg);		/* IE 9 */
			-webkit-transform: rotate(180deg);	/* Safari and Chrome */
			-o-transform: rotate(180deg);		/* Opera */
			-moz-transform: rotate(180deg);		/* Firefox */
			list-style-type:none;
		}
	</style>
</head>
<body>
	<ul>
		<li>这是第1行</li>
		<li>这是第2行</li>
		<li>这是第3行</li>
		<li>这是第4行</li>
		<li>这是第5行</li>
		<li>这是第6行</li>
		<li>这是第7行</li>
		<li>这是第8行</li>
		<li>这是第9行</li>
		<li>这是第10行</li>
		<li>这是第11行</li>
		<li>此处省略数千行</li>
		<li>。。。。。</li>
		<li>这是第9998行</li>
		<li>这是第9999行</li>
		<li>这是第10000行</li>
	</ul>
</body>
</html>

原创盗版

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 完美排序10000条数据li

看到一道面试题：有 10000 个子元素，如何将这 10000 个颠倒顺序。-------------要求是效率尽量要高。不光是算法效率，还要考虑DOM元素操作的效率。大家有什么想法？还有就是遇到类似这种问题解题技巧？-------------答：以下利用了css3旋转属性，将li翻转，同时再ul翻转。完美的倒排！http://lax.v2ex.com/t/100982 出
复制链接

扫一扫