uniapp瀑布流布局写法

首先我们要清楚瀑布流是什么?

瀑布流布局(Waterfall Flow Layout),也称为瀑布流式布局,是一种常见的网页或移动应用布局方式,特点是元素以不规则的方式排列,就像瀑布中的流水一样,每个元素的高度可以不同。

主要特点和优点包括:

  1. 不规则的排列:瀑布流布局允许元素以不同的高度和宽度排列,因此适用于展示不同尺寸和形状的内容,如图片、卡片、商品等。

  2. 动态加载:可以通过滚动加载或异步加载来动态添加新的元素,以实现无限滚动效果,提高用户体验。

  3. 最大化利用空间:瀑布流布局可以更好地利用可用空间,因为元素会根据其实际高度自动填充空白区域,减少了页面空白和浪费。

  4. 适应性:适用于不同屏幕大小和设备类型,可以实现响应式布局,适应各种屏幕分辨率。

  5. 视觉吸引力:瀑布流布局在设计上常常呈现出视觉上的吸引力,因为元素的不规则排列可以创造出有趣的视觉效果。

mode="widthFix"什么意思?

当你设置一个图片的 mode 属性为 "widthFix" 时,图片的宽度将会被拉伸或缩小以适应容器的宽度,同时保持图片的原始宽高比例。这意味着图片的高度会根据宽度自动调整,以确保图片不会变形,并且整个图片都能在容器内显示,而不会超出容器或留有空白。

存html和css生成,javascript中仅仅只是用于渲染的假数据。

用于渲染的假数据

      itemList: [
        {
          imageSrc: 'https://pic.imgdb.cn/item/65084fd3204c2e34d3a96817.jpg',
          title: '我是标题1',
          content: '我是内容1',
        },
        {
          imageSrc: 'https://pic.imgdb.cn/item/650850d7204c2e34d3a984ca.jpg',
          title: '我是标题2',
          content: '我是内容2',
        },
        {
          imageSrc: 'https://pic.imgdb.cn/item/64eee7e1661c6c8e54a86a07.jpg',
          title: '我是标题3',
          content: '我是内容3',
        },
        {
          imageSrc: 'https://pic.imgdb.cn/item/65085109204c2e34d3a9933c.jpg',
          title: '我是标题4',
          content: '我是内容4',
        },
        {
          imageSrc: 'https://pic.imgdb.cn/item/65084fd3204c2e34d3a96817.jpg',
          title: '我是标题5',
          content: '我是内容5',
        },
      ],

css样式部分

.content {
  padding: 30rpx;
  box-sizing: border-box;
  column-count: 2;
}
image {
  width: 100%;
  border-radius: 6rpx;
}
.title {
  margin-left: 15rpx;
  margin-right: 15rpx;
  font-size: 30rpx;
}
.con {
  margin: 15rpx;
  margin-top: 20rpx;
  display: flex;
  font-size: 26rpx;
  align-items: center;
  justify-content: space-between;
}
.list {
  break-inside: avoid;
  width: 330rpx;
  border: 1px solid #f4f4f4;
}

对于css每一部分的介绍

  1. .content

    • padding: 30rpx;:设置容器 .content 的内边距为 30rpx,这会在容器内部的内容和容器的边缘之间添加空间。
    • box-sizing: border-box;:指定了盒子模型为 border-box,这意味着内边距和边框的宽度不会增加容器的总宽度,以便更好地控制盒子的尺寸。
    • column-count: 2;:将容器 .content 分成两列,实现多列布局效果。
  2. image

    • width: 100%;:将所有图片的宽度设置为父容器宽度的100%,使图片自适应容器宽度。
    • border-radius: 6rpx;:设置图片的圆角半径为6rpx,使图片的边角变得圆滑。
  3. .title

    • margin-left: 15rpx;margin-right: 15rpx;:设置标题文本的左右外边距为15rpx,这会在标题文本的左右两侧添加空白间距。
    • font-size: 30rpx;:设置标题文本的字体大小为30rpx。
  4. .con

    • margin: 15rpx;:设置内容区块的上下外边距为15rpx,以及左右外边距的默认值,创建上下间距。
    • margin-top: 20rpx;:增加内容区块的上外边距,以增加上方的间距。
    • display: flex;:将内容区块设置为弹性布局,以便内部元素可以灵活布局。
    • font-size: 26rpx;:设置内容文本的字体大小为26rpx。
    • align-items: center;:设置内容区块内元素的纵向对齐方式为居中对齐。
    • justify-content: space-between;:设置内容区块内元素的横向对齐方式为两侧对齐,左右两侧留有空白空间。
  5. .list

    • break-inside: avoid;:避免在列表项之间分页中断,以确保每个列表项在同一页内显示完整。
    • width: 330rpx;:设置列表项的宽度为330rpx。
    • border: 1px solid #f4f4f4;:给列表项添加1像素宽的实线边框,边框颜色为 #f4f4f4,用于界定列表项的边界。

HTML部分

循环自己获取到的数据,也就是itemList的数据,绑定一个下标循环渲染

完整代码





谢谢观看

你可能感兴趣的:(uni-app)