WaterfallViewDemo.ag

copy下面代码，运行试试

--
--  Lua - UI
--  project[ MLNUIDemoTest ]  
--  package[ waterfall ]
--  waterefall_wiki.llua
--  Created by momo on 2020/09/16 10:33.
--  Copyright © 2020. All rights reserved.
--
WHITE = Color(255, 255, 255, 1)
BLACK = Color(0, 0, 0, 1)

model(tableModel)
Style = {
    CornerBorderImgStyle = {
        contentMode(ContentMode.SCALE_ASPECT_FILL),
        borderColor(BLACK),
        borderWidth(2),
        cornerRadius(12)
    }
}
mHeader() {
    Label("header").widthPercent(100).height(50)
    .bgColor(Color(120, 120, 120, 1))
    .textAlign(TextAlign.CENTER).crossSelf(CrossAxis.CENTER)
}
mCell1(item) {
    VStack().widthPercent(100).subs(
        ImageView(item.img)
        .widthPercent(100).height(260)
        .style(Style.CornerBorderImgStyle)
        ,
        mPopComment(item.comment)
    )
}
mCell2(item) {
    VStack().widthPercent(100)
    .subs(
        ImageView(item.img)
        .widthPercent(100).height(260)
        .style(Style.CornerBorderImgStyle)
        ,
        HStack().widthPercent(100)
        .crossAxis(CrossAxis.CENTER)
        .top(8)
        .subs(
            ImageView(item.img)
            .width(20).height(20)
            .contentMode(ContentMode.SCALE_ASPECT_FILL)
            .cornerRadius(20)
            ,
            Label(item.content).basis(1).fontSize(12).lines(2).left(8)
        )
    )
}

mBorderLabel(text, bgColor, textColor) {
    Label(text).lines(1).bgColor(bgColor).textColor(textColor)
    .borderColor(BLACK).borderWidth(1)
    .cornerRadius(30).fontSize(12)
    .padding(3, 8, 3, 8)
    .lines(1)
}
mPopComment(item) {
    HStack().subs(
        mBorderLabel(item.name .. "：" .. item.content, WHITE, BLACK)
        .maxWidth(window.width() / 2 - 50)
        ,
        ImageView(item.avatar)
        .contentMode(ContentMode.SCALE_ASPECT_FILL)
        .cornerRadius(20)
        .width(18).height(18)
        .borderColor(BLACK).borderWidth(1)
        .positionType(PositionType.ABSOLUTE)
        .positionLeft(-8).positionTop(-8)
    ).positionType(PositionType.ABSOLUTE)
    .positionBottom(15).positionLeft(20)
}
---
--- UI
ui {
    --- layout views
    WaterfallView()
    .spanCount(2)
    .layoutInset(5, 5, 5, 5)
    .itemSpacing(8).lineSpacing(8)
    .bindData(tableModel.data)
    .bindCell(function(item)
        if item.type == 1 then
            return mCell1(item).cellHeight(280)
        else
            return mCell2(item).cellHeight(320)
        end
    end)
    .bindHeader(function()
        return mHeader().headerHeight(50)
    end)

}

---
--- preview
local function preview()
    bgImg = "https://hbimg.huabanimg.com/7c41bc5871d74c9036932ca9bba76de363727be113b6fd-NApej6_fw658"
    tableModel.data = {
        {
            type = 1,
            img = bgImg,
            content = "给自己拍了一张仰望的照片，求小哥夸呀",
            avatar = bgImg,
            name = "Angela安琪拉",
            extra = nil,
            likeCount = 260,
            comment = {
                avatar = bgImg,
                name = "小花",
                content = "真棒"
            }
        },
        {
            type = 2,
            img = bgImg,
            content = "黑红禁穿买到了，看了是不是流口水～",
            avatar = bgImg,
            name = "格格不爱了",
            extra = "2个共同好友",
            likeCount = 25612,
            comment = {
                avatar = bgImg,
                name = "潘安",
                content = "太好看了，爱了！"
            }
        },
        {
            type = 2,
            img = bgImg,
            content = "黑红禁穿买到了，看了是不是流口水～",
            avatar = bgImg,
            name = "格格不爱了",
            extra = "2个共同好友",
            likeCount = 25612,
            comment = {
                avatar = bgImg,
                name = "潘安",
                content = "太好看了，爱了！"
            }
        },
        {
            type = 1,
            img = bgImg,
            content = "黑红禁穿买到了，看了是不是流口水～",
            avatar = bgImg,
            name = "格格不爱了",
            extra = "2个共同好友",
            likeCount = 25612,
            comment = {
                avatar = bgImg,
                name = "潘安",
                content = "太好看了，爱了！"
            }
        },
        {
            type = 1,
            img = bgImg,
            content = "黑红禁穿买到了，看了是不是流口水～",
            avatar = bgImg,
            name = "格格不爱了",
            extra = "2个共同好友",
            likeCount = 25612,
            comment = {
                avatar = bgImg,
                name = "潘安",
                content = "太好看了，爱了！"
            }
        },
        {
            type = 1,
            img = bgImg,
            content = "黑红禁穿买到了，看了是不是流口水～",
            avatar = bgImg,
            name = "格格不爱了",
            extra = "2个共同好友",
            likeCount = 25612,
            comment = {
                avatar = bgImg,
                name = "潘安",
                content = "太好看了，爱了！"
            }
        }
    }

end