css实现瀑布流

效果图

image.png

重要属性

最外层盒子
columns: 2;
column-gap: 14px;

如果还想响应式适配，可以配合媒体查询@media（max-width：xxx px）{}

子组件DiaryItemComponent --- html

<view class="diary-item-box-container">
        <image class="diary-img" mode="widthFix" :src="diaryInfo.img" />
        <view class="diary-title">{{ diaryInfo.title }}</view>
        <view class="user-info">
            <view class="left">
                <image
                    class="head-img"
                    src="https://ihairpic.yongxianghui.net/front_resource/patientImg/diary-user-headImg-default.png"
                />
                <text class="user-name">{{ diaryInfo.name }}</text>
            </view>
            <view class="right">
                <image
                    class="like-icon"
                    mode="widthFix"
                    src="https://ihairpic.yongxianghui.net/front_resource/patientImg/diary-unlike-icon.png"
                />
                <text class="count">{{ diaryInfo.count }}</text>
            </view>
        </view>
    </view>

子组件DiaryItemComponent ---css

<style lang="scss">
.diary-item-box-container {
    width: 100%;
    background: #ffffff;
    margin-bottom: 16px;
    padding-bottom: 26px;
    break-inside: avoid;

    .diary-img {
        max-width: 100%;
        border-radius: 8px 8px 0px 0px;
    }

    .diary-title {
        font-size: 28px;
        font-weight: bold;
        color: #333333;
        line-height: 40px;
        padding: 0 16px;
        margin-top: 20px;
    }

    .user-info {
        display: flex;
        justify-content: space-between;
        margin-top: 26px;
        padding: 0 16px;
        font-size: 24px;
        color: #666666;

        .left {
            display: flex;
            align-items: center;

            .head-img {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                margin-right: 10px;
            }

            .user-name {
                line-height: 32px;
            }
        }

        .right {
            display: flex;
            align-items: center;

            .like-icon {
                width: 24px;
                height: 22px;
                margin-right: 6px;
            }

            .count {
                line-height: 32px;
            }
        }
    }
}
</style>

父组件html

<view class="diary-main">
            <DiaryItemComponent
                v-for="item in diaryList.filter((_, index) => index % 2 === 0)"
                :key="item.id"
                :diaryInfo="item"
            />
            <DiaryItemComponent
                v-for="item in diaryList.filter((_, index) => index % 2 === 1)"
                :key="item.id"
                :diaryInfo="item"
            />
        </view>

父组件css

.diary-main {
        padding: 24px;
        columns: 2;
        column-gap: 14px;
    }