2 baicaijieshao baicaijieshao 于 2017.08.28 17:17 提问

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>
Csdn user default icon
上传中...
上传图片
插入图片