uniapp瀑布流实现（商品/图片瀑布流）

已于 2024-04-15 15:15:10 修改
阅读量698 收藏 11
点赞数 23
分类专栏： 前端技术栈Uniapp必备 分类、购物车、商品详情、瀑布流、轮播图、地址页面 文章标签： uni-app 前端 微信小程序 小程序
于 2024-04-15 14:12:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YN2000609/article/details/137778959
版权

      瀑布流布局是一种以流式展示内容的方式，使内容以类似瀑布流一样的形式逐个排列，这种布局方式在网站中广泛应用，特别是在图片和商城类型上。

1. 图片瀑布流：

不依赖任何插件，复制即可见效

<template>
  <view class="page">
    <view class="left" ref="left">
      <image class="image" v-for="(item,i) in leftList" :key="i" :src="item" mode="widthFix"></image>
    </view>
    <view class="right" ref="right">
      <image class="image" v-for="(item,i) in rightList" :key="i" :src="item" mode="widthFix"></image>
    </view>
  </view>
</template>


<script>
  export default {
    data() {
      return {
        imageList: [
          "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
          "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
          "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
          "https://img1.baidu.com/it/u=3866290852,3566512524&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
          "https://img2.baidu.com/it/u=1114729443,1120710416&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
          "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
          
        ], //所有图片
        leftList: [], //左边列图片
        rightList: [], //右边列图片
        leftHeight: 0, //左边列高度
        rightHeight: 0, //右边列高度
        columnWidth: 0 //列宽度
      }
    },
    mounted() {
      this.$nextTick(() => {
        uni.createSelectorQuery().in(this).select('.left').boundingClientRect(res => {
          this.columnWidth = res.width
          //方法
          this.setWaterFallLayout()
        }).exec()
      })
    },
    
    onReachBottom() {
      console.log("触底");
      let newList = [
        "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
        "https://img1.baidu.com/it/u=833730514,666835&fm=253&fmt=auto&app=138&f=JPEG?w=355&h=500",
        "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
        "https://img1.baidu.com/it/u=3311811998,3185175032&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625",
        "https://img0.baidu.com/it/u=3319997766,4089593231&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
      ]
      this.imageList.push(...newList)
      console.log(this.imageList);
      this.setWaterFallLayout();
    },
    
    methods: {
      //通过uni.getImageInfo，小程序支持
      async setWaterFallLayout() {
        for (let item of this.imageList) {
          try {
            let h = await this.getImgHeight(item)
            if (this.leftHeight <= this.rightHeight) {
              this.leftList.push(item)
              this.leftHeight += h
            } else {
              this.rightList.push(item)
              this.rightHeight += h
            }

          } catch (e) {}

        }

      },
      getImgHeight(url) {
        return new Promise((resolve, reject) => {
          uni.getImageInfo({
            src: url,
            success: e => {
              resolve(e.height)

            },
            fail: e => {
              reject(e)
            }
          })

        })
      }
    }
  }
</script>


<style lang="scss">
  .page {
    width: 100%;
    display: flex;
    align-items: flex-start;
    padding: 0 1%;
    box-sizing: border-box;
  }

  .left,
  .right {
    margin: 0 auto;
    width: 48%;
  }

  .image {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
  }
  .info{
    width: 100%;
    height: 200rpx;
    background-color: #55aa7f;
  }
</style>

运行效果：

2. 商品瀑布流： 

不依赖任何插件，复制即可见效 

<template>
  <view class="Index">
    <!-- 瀑布流布局列表 -->
    <view class="pubuBox">
      <view class="pubuItem">
        <view class="item-masonry" v-for="(item, index) in comList" :key="index">
          <image :src="item.img" mode="widthFix"></image>
          <view class="listtitle">
            <!-- 这是没有高度的父盒子（下半部分） -->
            <view class="listtitle1">{{ item.name }}</view>
            <view class="listtitle2">
              <text class="listtitle2son">￥</text>
              {{ item.commdityPrice }}
            </view>
            <view class="listtitle3">
              某某某某旗舰店
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        comList: [{
            img: "https://img2.baidu.com/it/u=3853345508,384760633&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1689958800&t=210689b7eb06d7c78958d7063151cba6",
            name: '商品的名称，可以很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
            commdityPrice: 100
          }, {
            img: 'https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1689958800&t=d6764859a9740bb4aead7703daa61876',
            name: '商品名称会在超出两行时候自动折叠',
            commdityPrice: 100
          },
          {
            img: 'https://img0.baidu.com/it/u=1604010673,2427861166&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1689958800&t=2e255208580c0570167a800344d3aa59',
            name: '只有一行标题时高度为39',
            commdityPrice: 100
          }, {
            img: 'https://img0.baidu.com/it/u=2627496060,1933351908&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1689958800&t=fd7a89ad586d338543b6916df7083e4f',
            name: '具体样式您可以自定义',
            commdityPrice: 100
          }, {
            img: 'https://img2.baidu.com/it/u=3853345508,384760633&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1689958800&t=210689b7eb06d7c78958d7063151cba6',
            name: 'vue的H5页面也是如此使用',
            commdityPrice: 100
          }
        ], //商品列表
      };
    },
    onShow() {},
    onLoad() {},
    methods: {},
    // 触底加载下一页 换成真实的请求到的数据
    onReachBottom() {
      console.log("触底");
      // 模拟的请求数据
      let newList = [
        {
          img: "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
          name: '具体样式您可以自定义',
          commdityPrice: 100
        }, {
          img: "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
          name: '具体样式您可以自定义',
          commdityPrice: 100
        }, {
          img: "https://img1.baidu.com/it/u=833730514,666835&fm=253&fmt=auto&app=138&f=JPEG?w=355&h=500",
          name: '具体样式您可以自定义',
          commdityPrice: 100
        }, {
          img: "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
          name: '具体样式您可以自定义',
          commdityPrice: 100
        },
      ]
      this.comList.push(...newList)
      console.log(this.comList);
    },
  };
</script>

<style scoped="scoped" lang="scss">
  //瀑布流
  page {
    background-color: #eee;
    height: 100%;
  }

  .pubuBox {
    padding: 22rpx;
  }

  .pubuItem {
    column-count: 2;
    column-gap: 20rpx;
  }

  .item-masonry {
    box-sizing: border-box;
    border-radius: 15rpx;
    overflow: hidden;
    background-color: #fff;
    break-inside: avoid;
    /*避免在元素内部插入分页符*/
    box-sizing: border-box;
    margin-bottom: 20rpx;
    box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
  }

  .item-masonry image {
    width: 100%;
  }

  .listtitle {
    padding-left: 22rpx;
    font-size: 24rpx;
    padding-bottom: 22rpx;

    .listtitle1 {
      line-height: 39rpx;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      min-height: 39rpx;
      max-height: 78rpx;
    }

    .listtitle2 {
      color: #ff0000;
      font-size: 32rpx;
      line-height: 32rpx;
      font-weight: bold;
      padding-top: 22rpx;

      .listtitle2son {
        font-size: 32rpx;
      }
    }

    .listtitle3 {
      font-size: 28rpx;
      color: #909399;
      line-height: 32rpx;
      padding-top: 22rpx;
    }
  }

  .Index {
    width: 100%;
    height: 100%;
  }
</style>

运行效果：

瀑布流的一些要点： 

  1. 布局结构：Web瀑布流布局通过动态加载和排列内容，使得页面更加有吸引力和互动性。它使用CSS和JavaScript来实现自适应布局，确保在不同尺寸的屏幕上都能达到最佳效果。

  2. 图片加载：在Web瀑布流中，图片通常是主要的内容元素。为了加快页面加载速度，常常使用延迟加载技术，即只在用户滚动到可见区域时才加载图片。这种方法可以有效减少页面加载时间。

  3. 动态排列：Web瀑布流通过JavaScript实现了动态排列内容的功能。它根据内容的高度和宽度等因素来决定每个内容块的位置，以使得页面整体看起来更加美观。需要注意的是，动态排列需要通过计算和调整来确保内容块不会重叠或出现缺口。

  4. 响应式设计：Web瀑布流布局在不同设备上都能够适应，包括桌面、平板和移动设备。采用响应式设计可以根据屏幕尺寸和方向来动态调整内容的排列和展示方式，提供更好的用户体验。

 

耀南.
关注
  • 23
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
uni-app 瀑布流
Tianxiaoxixi的博客
02-16 7884
uni-app 瀑布流
vue+uniapp瀑布流布局多种实现方式
pixle的博客
01-08 9632
瀑布流布局是网页设计常见的一种布局，一般用于图片多列展示。列宽固定，图片根据自身高度自适应交错排列。
uni-app 瀑布流布局的实现
UserGuan的博客
10-16 4343
获取每一列的高度，每次图片加载时，把该图片加载到列高度最短的那一列进行实现。注意：这个是通过图片初始化实现的，所以服务器端的数据必须含有图片。
uni-app开发壁纸图像小程序 瀑布流、懒加载展示
H5爱好者
06-16 2325
为了提高用户体验，我们可以使用uni-app框架来开发这样的小程序，并实现瀑布流和懒加载展示功能。本文将介绍如何使用uni-app框架来开发壁纸图像小程序，并详细讲解瀑布流和懒加载展示的实现方法。
uniapp写瀑布流
weixin_42600407的博客
02-09 372
UniApp 是一款支持多端开发的框架，您可以使用它来实现瀑布流布局。 实现瀑布流的方法有很多，其中一种是使用 CSS Flexbox 布局。您可以将父容器的 display 设置为 flex，然后通过 flex-wrap 属性设置内部元素的换行方式。您还可以通过 align-content 属性设置元素在父容器内的对齐方式。 如果您不熟悉 CSS Flexbox 布局，可以参考一些教程或者文档，...
伪瀑布流_uniapp瀑布流_uniapp瀑布流_插件_
10-04
uniapp插件(组件) 拖入即用 只需要引入 相关dom
uniapp vue瀑布流自定义控件资源包
06-12
uniapp vue瀑布流自定义控件资源包，可以配合文档进行实现瀑布流，上拉加载，下拉刷新，图片可以设置无图片、失败图片等等，状态等待、加载中、上拉加载更多。 后续会进行优化
纵向瀑布流布局（双列）
07-23
纵向瀑布流布局（双列）
uniapp小程序瀑布流组件包
最新发布
02-01
uniapp小程序瀑布流组件包
waterfall自适应图片瀑布流布局无限加载代码
12-31
waterfall自适应图片瀑布流布局无限加载代码，兼容电脑、平板和手机端浏览，使用front封装渲染，cell的宽高间隙定义全局参数自行修改。
瀑布流布局微信小程序
10-20
微信小程序源码，前端源码，简单展示源码，原生小程序源码 非uniapp，仅供参考，如有涉及版权问题请联系作者。微信小程序源码，前端源码，简单展示源码，原生小程序源码 非uniapp，仅供参考，如有涉及版权问题请联系...
uniapp小视频项目
08-10
uniapp小视频项目 原博客地址：https://blog.csdn.net/u010356768/article/details/123352875 uniapp相关api笔记：https://blog.csdn.net/u010356768/article/details/123062294
vue实现图片加载完成前的loading组件方法
08-28
下面小编就为大家分享一篇vue实现图片加载完成前的loading组件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解性能更优越的小程序图片懒加载方式
01-03
实现方式 传统H5的懒加载方式都是通过监听页面的scroll事件来实现的，结合viewport的高度来判断。 小程序也类似，通过监听页面onPageScroll事件获取当前滚动的数据，结合getSystemInfo获取设备信息来判断。由于...
uniapp实现瀑布流
zzx262625的博客
10-28 1703
width: 90%;然后看看效果；希望对你有所帮助；如有需要酌情修改。
关于uniapp的图片瀑布流
skynine的博客
05-11 637
但是这样有个弊端，排列的顺序是按照奇数偶数来控制的，可能跟自己的有偏差，我们采用column布局也是一样的道理无法控制排列顺序，column布局百度有很多，这里就不写了，而我们一般的瀑布流是多列情况哪一列最短，那么下一个元素补位在最短那一列，看到很多关于瀑布流写法问题，有flex布局，column布局，等等方面，但是自己使用起来有一些问题，所以现在自己写一个关于瀑布流的文章，新手写法，写的不好勿喷，先介绍一下flex和column写法。今天的内容就写到这里，欢迎大家一起讨论，提升前端技术！
uniapp 小程序实现瀑布流的三种写法
XL984507092的博客
11-27 1421
左侧高度大于右侧的时候去右边 左侧的虚拟高度减去30 右侧高度大于左侧的时候 右侧高度减去30，然后渲染。index%2 == 0 去左侧 index%2 == 1去右侧。1.第一种利用虚假高度进行分列。
uniapp 实现瀑布流图片
06-11
Uniapp 中可以使用 `u-grid` 组件实现瀑布流布局。以下是一个简单的例子： 1. 在页面中引入 `u-grid` 组件： ```html <template> <u-grid :list="images" :column-num="2"> <template v-slot="{ item }"> <img :src="item.url" style="width: 100%;" /> </template> </u-grid> </template> ``` 2. 在页面中定义图片列表数据： ```js <script> export default { data() { return { images: [ { url: 'https://picsum.photos/id/1/300/200' }, { url: 'https://picsum.photos/id/2/300/400' }, { url: 'https://picsum.photos/id/3/300/200' }, { url: 'https://picsum.photos/id/4/300/500' }, { url: 'https://picsum.photos/id/5/300/200' }, { url: 'https://picsum.photos/id/6/300/300' }, { url: 'https://picsum.photos/id/7/300/400' }, { url: 'https://picsum.photos/id/8/300/200' }, { url: 'https://picsum.photos/id/9/300/600' }, { url: 'https://picsum.photos/id/10/300/200' }, { url: 'https://picsum.photos/id/11/300/400' }, { url: 'https://picsum.photos/id/12/300/200' }, { url: 'https://picsum.photos/id/13/300/300' }, { url: 'https://picsum.photos/id/14/300/400' }, { url: 'https://picsum.photos/id/15/300/200' }, { url: 'https://picsum.photos/id/16/300/500' }, { url: 'https://picsum.photos/id/17/300/200' }, { url: 'https://picsum.photos/id/18/300/300' }, { url: 'https://picsum.photos/id/19/300/400' }, { url: 'https://picsum.photos/id/20/300/200' } ] } } } </script> ``` 这样就可以实现一个简单的瀑布流布局。你可以根据需要调整列数和图片数据。注意，`u-grid` 组件需要引入 `uview-ui` 库。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

耀南.

你的鼓励将是我最最最最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值