flip动画原理讲解

视频解说：

FLIP动画【渡一教育】_哔哩哔哩_bilibili

其中document.body.appendChild(div)语句执行时，元素已加入到body末尾，但此时依旧是Js线程在控制浏览器，所以屏幕上看不到元素，但实际可以获取元素宽高。此原理可加一行2秒的死循环加以验证。

对后端返回图片地址但没返回图片宽高的情况，可以用该原理排版瀑布流

<style>
  *{margin:0;padding:0;}
  .haha{width:120px;margin:10px;}
</style>
 
 
   var div = document.createElement('div')
    var img = document.createElement('img')
    img.onload = function (e) {
      console.log('======e', img.height, img.width);
      document.body.appendChild(div)
      console.log('=====测量', div.getBoundingClientRect());
    }
    img.src = '400.jpg'//原图是400*400
    img.style.width = '100%'
    img.style.display = 'block'
    div.className = 'haha'
    div.innerHTML = '
789789
'
    div.appendChild(img)
    document.body.appendChild(div)
    //delay()
    console.log('======delay之后');
    function delay() {
      var start = Date.now()
      while (Date.now() - start < 4000) { }
    }

img的宽度设置了百分比，并且在img的onload事件中，如果图片被appendChild到了页面中，比如执行了   

div.appendChild(img);document.body.appendChild(div)语句

那么在onload事件中获得的e.width会根据父级宽度计算百分比。

如果没被加到页面中，那么只会是原始的图片宽度