vue实现简单瀑布流布局


Posted in Javascript onMay 28, 2020

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

vue中的瀑布流布局组件

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

vue实现简单瀑布流布局

另外结合vue-lazy实现懒加载 ( npm i vue-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: "开发者"}
 ]

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

<template>
<div>
 <div class="waterfall px-container clearfix" v-cloak>
 <ul class="px-waterfall left" v-for="(el,i) in newWaterfallData" :key="i">
 <li v-for="(item,index) in el" :key="index">
 <div style="position: relative;" >
  <router-link to="/goodsdetail/1">
   <img v-lazy="item.e_img" class="bg-img" alt="" v-loading="true">
  </router-link>
  <div class="px-hot-tag" v-if="item.u_img">
   <img :src="item.u_img" alt="" >
  </div>
 <h3 class="font22 color-fff fh" v-if="item.e_intro"> {{item.e_intro}}</h3>
  </div>
 </li>
 </ul>
 </div>
</div>
</template>
<script>
export default {
 data() {
 return {
 newWaterfallData: '',
 waterfallDataNumber:''
 }
 },
 created() {
 let [ ...waterfallData ] = this.waterfallData
 let [ ...newWaterfallData ]= [[],[],[]]
 waterfallData.forEach((el,i) => {
 switch( i%3 ) {
 case 0 : newWaterfallData[0].push(el)
  break
 case 1: newWaterfallData[1].push(el)
  break
 case 2: newWaterfallData[2].push(el)
  break
 }
 });
 this.newWaterfallData = newWaterfallData
 },
 props: [ 'waterfallData' ]
}
</script>
<style lang="scss">
 .px-container {
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
 }
 .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: 0 30px;
 }
 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: 8px 0 8px 0;
 }
 }
 .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: 0 22px;
 text-align: center;
 .color-666-line {
 border-bottom:2px solid #666666;
 }
 .red-line {
 border-bottom:2px solid #F65050;
 }
 }
</style>

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
React路由管理之React Router总结
May 10 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
fastadmin中调用js的方法
May 14 Javascript
js实现转动骰子模型
Oct 24 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 #Javascript
微信小程序用canvas画图并分享
Mar 09 #Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 #Javascript
原生js无缝轮播插件使用详解
Mar 09 #Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 #Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 #Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 #Javascript
You might like
日本收入最高的漫画家:海贼王作者版税年收入高达8.45亿元
2020/03/04 日漫
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
jquery获取radio值实例
2014/10/16 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
pygame实现弹球游戏
2020/04/14 Python
基于python实现操作redis及消息队列
2020/08/27 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
Oracle性能调优原则
2012/05/03 面试题
师范大学应届生求职信
2013/11/21 职场文书
自我鉴定四大框架
2014/01/17 职场文书
社区包粽子活动方案
2014/01/21 职场文书
六年级学生评语
2014/04/22 职场文书
职工小家建设活动方案
2014/08/25 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
保护校园环境倡议书
2015/04/28 职场文书
报案材料怎么写
2015/05/25 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
Go 中的空白标识符下划线
2022/03/25 Golang