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 相关文章推荐
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
详解javascript高级定时器
Dec 31 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
Vue.js学习示例分享
Feb 05 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 Javascript
React实现轮播效果
Aug 25 Javascript
JS实现纸牌发牌动画
Jan 19 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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
php实现删除空目录的方法
2015/03/16 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
详解Vue打包优化之code spliting
2018/04/09 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
python实现微信自动回复功能
2018/04/11 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
七年级生物教学反思
2014/01/30 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
片区教研活动总结
2014/07/02 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
python通过新建环境安装tfx的问题
2022/05/20 Python