轩枫阁

首页 / Web前端 / 使用CSS3 实现列表翻转

使用CSS3 实现列表翻转

面试题

<ul>有 10000 个<li>子元素,如何将这 10000 个<li>颠倒顺序。要求是效率尽量高。不光是算法效率,还要考虑DOM元素操作的效率。via:V2EX

方案设想

1. 先复制一份 (不要插入到DOM中,频繁的操作DOM消耗资源是很大的)

2. 对复制出的这份做操作. 方法是从最后一个开始拿插入到一个新的<ul>中 (这一步也不需要插入到DOM中)

3. 将DOM中的<ul>更换为从新排序的<ul>

优点在内存中操作完成,然后插入到页面中,效率上有所提升。

缺点:复制的实现复杂效率也不高,cloneNode 也不克隆事件。

一看到这道题,很多人也就在想利用JS,结合算法实现出来。但是最佳的方案竟然不是这个。

最佳方案

利用CSS3,以下代码,有想到如何实现没?

 Demo

感谢一丝大神的分享

Demo1:http://jsbin.com/sikucoki/1/edit

Demo2:http://jsbin.com/wicoleke/1/edit

效果图

qwe

N1JK1H(}~GG0CSV@OW7]X12

参考资料

Reverse li

StackOverflow

W3schools

本文标题:使用CSS3 实现列表翻转 - 轩枫阁

转载请务必注明出处,欢迎分享

如果觉得我的文章对您有用,请随意打赏
赞  赏
赞赏作者 轩枫-ivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
207/458
209/458

相关文章

文章评论

  • 暂无评论

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]