How to write waterfall flow layout in uniapp

First we need to understand what waterfall flow is?

Waterfall Flow Layout, also known as waterfall flow layout, is a common layout method for web pages or mobile applications. It is characterized by elements arranged in an irregular manner, just like the flowing water in a waterfall. Each element The height can be different.

Key features and benefits include:

1. Irregular arrangement: Waterfall layout allows elements to be arranged at different heights and widths, so it is suitable for displaying content of different sizes and shapes, such as pictures, cards, products, etc.

2. Dynamic loading: New elements can be dynamically added through rolling loading or asynchronous loading to achieve infinite scrolling effects and improve user experience.

3. Maximize use of space: Waterfall layouts make better use of available space because elements automatically fill empty areas based on their actual height, reducing page white space and waste.

4. Adaptability: Suitable for different screen sizes and device types, it can implement responsive layout and adapt to various screen resolutions.

5. Visual appeal: Waterfall layouts are often visually appealing in design because the irregular arrangement of elements can create interesting visual effects.

What does mode="widthFix" mean?

When you set an image's modeproperty to "widthFix", the width of the image will be stretched or reduced to fit the width of the container, while maintaining the image's original aspect ratio. This means that the height of the image automatically adjusts based on the width to ensure that the image does not distort and the entire image fits within the container without exceeding it or leaving empty space.

Save html and css to generate, and the javascript is just fake data for rendering.

Fake data for rendering

      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 style part

.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;
}

An introduction to each part of css

1. .content：

   • padding: 30rpx;:Sets the container .content's padding to 30rpx, which adds space between the content inside the container and the edges of the container.
   • box-sizing: border-box;: specifies the box model as border-box, which means that the width of the padding and borders does not add to the overall width of the container, allowing for better control over the size of the box.
   • column-count: 2;: Divide the container .contentinto two columns to achieve a multi-column layout effect.

2. image：

   • width: 100%;: Set the width of all images to 100% of the width of the parent container, making the images adapt to the width of the container.
   • border-radius: 6rpx;: Set the corner radius of the picture to 6rpx to make the corners of the picture rounded.

3. .title：

   • margin-left: 15rpx;and margin-right: 15rpx;: Set the left and right margins of the title text to 15rpx, which will add white space to the left and right sides of the title text.
   • font-size: 30rpx;: Set the font size of the title text to 30rpx.

4. .con：

   • margin: 15rpx;: Set the top and bottom margins of the content block to 15rpx, and the default left and right margins to create top and bottom spacing.
   • margin-top: 20rpx;: Increase the top margin of the content block to increase the upper spacing.
   • display: flex;: Set the content block to flexible layout so that internal elements can be laid out flexibly.
   • font-size: 26rpx;: Set the font size of the content text to 26rpx.
   • align-items: center;: Set the vertical alignment of elements within the content block to center alignment.
   • justify-content: space-between;: Set the horizontal alignment of elements within the content block to align on both sides, leaving blank space on the left and right sides.

5. .list：

   • break-inside: avoid;: Avoid pagination breaks between list items to ensure that each list item is displayed completely on the same page.
   • width: 330rpx;: Set the width of the list item to 330rpx.
   • border: 1px solid #f4f4f4;: Add a solid border of 1 pixel width to the list item, with the border color of #f4f4f4, used to define the boundary of the list item.

HTML part

Loop the data you get, that is, the data of itemList, bind a subscript to loop rendering

<template>
  <view>
    <view class="content">
      <view class="list" v-for="(item, index) in itemList" :key="index">
        <image mode="widthFix" :src="item.imageSrc"></image>
        <view class="title">{
   
   { item.title }}</view>
        <view class="con">{
   
   { item.content }}</view>
      </view>
    </view>
  </view>
</template>

Complete code

<template>
  <view>
    <view class="content">
      <view class="list" v-for="(item, index) in itemList" :key="index">
        <image mode="widthFix" :src="item.imageSrc"></image>
        <view class="title">{
   
   { item.title }}</view>
        <view class="con">{
   
   { item.content }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      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',
        },
      ],
    };
  },
  onUnload() {},
  methods: {},
};
</script>

<style scoped>
.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;
}
</style>

Thanks for watching