举个栗子:
// HTML:
<div class="box">
<div class="card">
<div>
<img @load="loadImg()" src="url" alt="" /> // 可以循环放图片
</div>
</div>
</div>
//JS
methods:{
loadImg() {
this.waterFall(4); // 一排4个,可以根据宽度自动调整
},
waterFall(num) { // 动态的计算位置
// 瀑布流
var cardW = parseInt($(".card").outerWidth());
var hArr = [];
$(".card").each((index, item) => {
if (index < num) {
$(item).css({
top: 0,
left: index * cardW + index * 18 + "px",
});
hArr.push($(item).outerHeight());
} else {
var minH = Math.min.apply(null, hArr);
var minIndex = hArr.indexOf(minH);
$(item).css({
top: `${minH + 18}px`,
left: `${cardW * minIndex + minIndex * 18}px`,
});
hArr[minIndex] = $(item).outerHeight() + 18 + hArr[minIndex];
}
});
var maxH = Math.max.apply(null, hArr);
$('.box').height(maxH + 10);
},
}
// css
.box {
position:relative;
.card {
position:absolute;
img {
min-width: 50%;
max-width: 100%;
margin: 0 auto;
cursor: pointer;
margin-bottom: 6px;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
&:hover { //实现缩放
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
opacity: 0.8;
}
}
}
}