瀑布流及适配

瀑布流

bfc 双列宽度 50% 容器，每列创建 bfc 容器，bfc吸顶，获取每列容器高度，根据宽高比，计算异步加载十条内容的插入到对应顺序，计算好后一次性插入

flex:{
    两列flex-box，计算flex-box的高度，依次向高度较低的插入新元素
    father: {	
        display:flex;
        flex-direction:column;
        overflow-y: scroll
    };
    item: { 
        width = calc(100%/2)-margin/padding // 2为你的列数 
    }
};
column 布局;
JS + flex：双列 flex 容器，计算高度，低的容器动态插入元素;

rem 移动端适配

初始化计算10px = 1rem锁定后转化为不同尺寸

fnResize()
window.onresize = function() {
    fnResize()
}
function fnResize() {
    var deviceWidth = document.documentElement.clientWidth || window.innerWidth
    if (deviceWidth >= 750) {
        deviceWidth = 750
    }
    if (deviceWidth <= 320) {
        deviceWidth = 320
    }
    document.documentElement.style.fontSize = (deviceWidth * 2) / 75 + 'px'
}

毛玻璃特效

1: {	backdrop-filter:blur(5px)  },
2: {	目标元素伪元素设置: {	
        targetDiv::after: {
            filter: blur(5px), 
            background-image: url(‘url’)
        }
    }
}

video强制全屏解决

安卓全屏：x5-video-player-type="h5"
IOS 全屏：webkit-playsinline="true" playsinline="true"

video自定义播放进度条

video: {
    controls="false"
}
两个div: 操作一个div动态设置宽度

问题：vue中ref绑定节点获取不到

解决：ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。
比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。