baicaijieshao 2017-08-28 09:17 采纳率: 0%
浏览 3610

Vue.js页面渲染生命周期问题

使用Vue.js做瀑布流布局时,在mounted中直接调用waterFall函数,页面上图片布局是乱的,设置了setTimeout延迟0ms渲染也不起作用。
在safari和chrome上页面正常了,设置延迟100ms,页面加载后布局正常,但是明显的可以看到布局的变化过程,效果不好,延迟值再设置低一些,就不起作用;
在火狐浏览器,要设置延迟150ms以上才起作用,而且也是可以看到页面布局的变化过程,体验不好。
求各位大师指点明路。

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../../../vue.js"></script>
        <style>
            *{margin: 0;padding: 0}
            #main{position: relative;margin:0 auto;}
            #main::after{content: '';display: block;height: 0;clear: both;visibility: hidden;}
            .pic{float: left;padding: 15px 0 0 15px;}
            .pic img{padding: 10px;width: 165px;height: auto;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 0 5px #ccc;}
        </style>
    </head>
    <body>
        <div id="main">
            <div class="pic" v-for='img in images'>
                <img :src="img">
            </div>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el : '#main' ,
                data : {
                    images:[
                        'images/0.jpg','images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg','images/7.jpg','images/8.jpg','images/9.jpg',
                        'images/10.jpg','images/11.jpg','images/12.jpg','images/13.jpg','images/14.jpg','images/15.jpg','images/16.jpg','images/17.jpg','images/18.jpg','images/19.jpg',
                        'images/20.jpg','images/21.jpg','images/22.jpg','images/23.jpg','images/24.jpg','images/25.jpg','images/26.jpg','images/27.jpg','images/28.jpg','images/29.jpg',
                        'images/30.jpg','images/31.jpg','images/32.jpg','images/33.jpg','images/34.jpg','images/35.jpg','images/36.jpg'
                    ]
                },
                mounted:function(){
                    var _this = this ;
                    setTimeout(function(){
                        _this.waterFall('main','pic');
                    },0);
                    //safari浏览器下必须迟延30ms执行waterFall,布局才会正常渲染,其他浏览器下设置为0即可。
                },
                methods:{
                    getByClass:function(oParent,clsName){
                        return oParent.getElementsByClassName(clsName);
                    },
                    waterFall:function(Parent,clsName){
                        var _this = this ;
                        var oParent = document.getElementById(Parent);
                        var oBoxs = _this.getByClass(oParent,clsName);
                        var oBoxW = oBoxs[0].offsetWidth ;              //获取每列的宽度
                        var pageW = document.documentElement.clientWidth ;
                        var cols = Math.floor(pageW / oBoxW) ;      //判断页面列数
                        oParent.style.cssText = 'width:' + cols*oBoxW +'px;'; //设定main的宽度并居中
                        var arr = [] ;                  //用于存放每列的高度
                        for(var i=0;i<oBoxs.length;i++){
                            if( i<cols ){
                                arr.push(oBoxs[i].offsetHeight);
                            }else {
                                var minH = Math.min.apply('null',arr);          //求出高度最低列的值
                                var index = _this.getMinIndex(arr,minH) ;       //高度最低列的索引值
                                oBoxs[i].style.position = 'absolute' ;
                                oBoxs[i].style.top = minH + 'px' ;
                                oBoxs[i].style.left = oBoxs[index].offsetLeft + 'px' ;
                                arr[index] += oBoxs[i].offsetHeight ;           //更新数组中每列的高度
                            }
                        }
                    },
                    getMinIndex:function(arr,value){            //获取数组arr中,值为value的索引值
                        for(var i=0;i<arr.length;i++){
                            if(arr[i] == value){ return i ;}
                        }
                    }
                },
            });
        </script>
    </body>
</html>
  • 写回答

1条回答

  • dabocaiqq 2018-05-21 01:57
    关注
    评论

报告相同问题?

悬赏问题

  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?