使用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>