完美排序10000条数据

最新推荐文章于 2018-06-15 10:42:22 发布

weixin_30678349

最新推荐文章于 2018-06-15 10:42:22 发布

阅读量354

点赞数

原文链接：http://www.cnblogs.com/mjorcen/p/3697143.html

版权

完美排序10000条数据

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

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
      <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>

来自: http://www.oschina.net/code/snippet_1258821_35227

转载于:https://www.cnblogs.com/mjorcen/p/3697143.html

weixin_30678349

关注

0
点赞
踩
0

收藏

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

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

扫一扫