好资源导航 » 文章资讯 » vue实现简单瀑布流布局

vue实现简单瀑布流布局

2023-07-29 13:40:04 94

vue简单实现瀑布流布局的一种方式（vue瀑布流组件），供大家参考，具体内容如下

vue中的瀑布流布局组件

需求：图片容器宽度固定，高度根据图片自适应，图片一行不能排列时候，换行依次从左往右排列。（瀑布流概念）

另外结合vue-lazy实现懒加载（npmivue-lazyload--save-dev）
使用也很简单，在需要懒加载的img标签上将:src换成v-lazy

父组件传递数据：

waterfallData:[
{
e_img:"test.jpg",
//图片
e_intro:"描述信息",
u_img:"test.jpeg",
//标记图
u_name:"开发者"},
{
e_img:"test.jpg",
e_intro:"描述信息",
u_img:"test.jpeg",
u_name:"开发者"}
]

定宽不定高瀑布流布局子组件




.px-container{
width:100%;
max-width:1200px;
margin:0auto;
}
.clearfix:before,
.clearfix:after{
content:"";
display:block;
clear:both;
}
.clearfix{
zoom:1;
}
.left{
float:left;
}
.font22{
font-size:22px;
}
.color-fff{
color:#fff;
}
.fh{
overflow:hidden;
}
[v-cloak]{
display:none!important;
}
.waterfall{
margin-top:20px;
}
.px-waterfall{
width:calc(380px);
&:nth-child(3n+2){
margin:030px;
}
img.bg-img{
border-radius:8px;
}
h3{
text-overflow:ellipsis;
white-space:nowrap;
text-overflow:ellipsis;
height:30px;
font-family:PingFangSC-Semibold;
font-weight:600;
line-height:30px;
letter-spacing:6px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:999;
}
li{
background:#fff;
border-radius:8px;
margin-bottom:20px;
}
}

.px-hot-tag{
position:absolute;
top:0;
border-radius:8px;
width:71px;
height:30px;
img{
border-radius:8px08px0;
}
}
.photo{
position:relative;
height:25px;
.keywordbox{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
height:25px;
}
}
.keyword{
height:25px;
line-height:25px;
padding:022px;
text-align:center;
.color-666-line{
border-bottom:2pxsolid#666666;
}
.red-line{
border-bottom:2pxsolid#F65050;
}
}

如有问题，欢迎指正，如您有好的方案，敬请与我分享！

更多文章可以点击《Vue.js前端组件学习教程》学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue实现简单瀑布流布局

热门推荐

随机推荐